Question

我正在抛出一些相当简单的代码，以从数据文件中构建出一些矩形，这些矩形都可以正常工作，但是我试图为rectangles.enter()添加类似于{{1 }}

在转换之前，我已经考虑使用.transition().duration(1000)函数，但是无论我将其放在代码中的什么位置，都不会改变，或者整个图形都会消失。是否可以在enter函数上添加过渡，还是需要变通使用.on()

d3.select

Answer 1

简单的答案是否定的，对于过渡，您需要定义两个状态：动画的初始状态和最终状态。使用d3的enter - update - exit周期，您可能会得到如下结果：矩形从SVG的中心飞来，一次平滑地改变其大小和颜色。

进入阶段设置过渡的初始状态，更新阶段在过渡期间执行更改以达到最终状态。对于此示例，实际上并不需要退出。它将需要删除在更新阶段之后不再存在的节点。

https://bl.ocks.org上有很多不错的示例和有关该主题的教程，供您进一步阅读。

    d3.json("data/buildings.json").then(function(data){
    data.forEach(function(d){
        d.height = +d.height;
    });
    console.log(data);

    var width = 400;
    var height = 400;

    var svg = d3.select("#chart-area").append("svg")
        .attr("width", width)
        .attr("height", height);

    var rectangles = svg.selectAll("rect")
        .data(data);

    var rectEnter = rectangles.enter()
        .append('rect')
        .attr('x', width/2)
        .attr('y', height/2)
        .attr('width', 1e-6)
        .attr('height', 1e-6)
        .attr('fill', 'red')

    var rectUpdate = rectEnter.merge(rectangles)

    rectUpdate.transition()
        .duration(1500)
        .attr('x', function(d,i) { return  (i * 50) + 25 })
        .attr('y', 25)
        .attr('width', 40)
        .attr('height', function(d) { return d.height })
        .attr('fill', 'grey')

    var rectExit = rectangles.exit().remove()

})

和数据集buildings.json

[
    {
        "id": 1,
        "height": 20
    }, {
        "id": 2,
        "height": 40
    }, {
        "id": 3,
        "height": 10
    }
]

D3过渡未在svgelement.enter（）上发生

1 个答案: