时间戳

首页 > 解决方案 > svgelement.enter() 上未发生 D3 转换

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

问题描述

我正在输入一些相当简单的代码来从数据文件中构建一些矩形，这些矩形都可以正常工作，但是我正在尝试为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")

})

标签： javascriptd3.jstransition

解决方案

简单的答案是否定的，对于过渡，您需要定义两个状态：动画的初始状态和最终状态。使用enter - update - exitd3 的循环，您最终可能会得到这样的结果：矩形从 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()

})

和数据集 building.json

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

推荐阅读