Question

我已经创建了一个带有虚拟数据的基本示例，以尝试在D3中向图表添加或删除数据时了解正在发生的事情。可以看到示例小提琴here。

据我所知，在 generateBars（数据）函数内部;

我更新x和y域，确保下一次调用轴使它们正确缩放：

testUpdateX.domain(data.map(function(d) {return d.destination;}));
testUpdateY.domain([0, d3.max(data, function(d) {return d.p_in;})]);

传递参数中的新数据变量：

var bars = svg.selectAll(".testUpdateBar").data(data);

更新当前柱的'x，y，宽度和高度：

bars.transition().duration(2500)
    .attr("x", function(d) {return testUpdateX(d.destination);})
    .attr("y", function(d) {return testUpdateY(d.p_in);})
    .attr("width", testUpdateX.bandwidth() - 5)
    .attr("height", function(d) {return testUpdateHeight - testUpdateY(d.p_in);})
    .style("fill", function(d) {
        var maxIn = d3.max(data, function(d) {return d.p_in;});
        if (d.p_in < maxIn * 0.3) {
            return "red";
        } else if (d.p_in > maxIn * 0.3 && d.p_in < maxIn * 0.6) {
            return "orange";
        } else {
            return "green";
        }
    });

然后，通过调用.enter()函数并将相同的属性和样式应用于新数据，将新的“rect”元素添加到新数据中：

 bars.enter().append("rect").attr("class", "testUpdateBar")
     .attr("x", //...)
     .attr("y", //...)
      etc...

调用.exit()和.remove()以删除已删除的数据栏：

bars.exit().transition().duration(2500).remove();

然后，最后，重新调用我的轴，以便根据新指定的域更新它们：

svg.select(".testUpdateXaxis").transition().duration(2500).call(testUpdateXaxis);
svg.select(".testUpdateYaxis").transition().duration(2500).call(testUpdateYaxis);

为什么“Spar”的最终栏没有出现？ y轴正确为它的新值和空间创建，但似乎没有附加矩形元素。

为不必要的长变量名称道歉。我在现有文件中对此进行测试，并希望确保名称不冲突。

Answer 1

看看你的代码。你在generateBars函数中有这个：

var svg = d3.select("body");

因此，当您点击该按钮时，您实际上是附加了输入选择的Spar矩形... 外部 SVG！

应该简单地说：

那就是什么都没有！

以下是更新的jsfiddle：https://jsfiddle.net/pugya97h/

D3.js条形元素未动态添加

1 个答案: