javascript - svgelement.enter() 上未发生 D3 转换

Question

我添加了一些相当简单的代码来从数据文件中构建一些矩形，一切正常，但是我试图添加 rectangles.enter() 的转换 类似于 .transition().duration(1000)

我在转换之前考虑过使用 .on() 函数，但无论我将其放在代码中的哪个位置，要么没有变化，要么整个图形消失。是否可以在输入功能上添加转换，或者我是否需要解决使用d3.select

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

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

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

    rectangles.enter()
        .append("rect")
            .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")

})

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
    }
]