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

我用虚拟数据创建了一个基本示例，试图了解在D3中向图形添加或删除数据时发生的情况。可以看到小提琴的例子

据我所知，在generateBars（data）函数中

我更新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";
        }
    });

调用

.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轴本身正确地表示它的新值，并创建了一个空间，但似乎没有附加任何矩形元素

---

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

查看您的代码。在

generateBars

函数中有以下内容：

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

因此，当您单击按钮时，实际上是在添加enter选择的

Spar

矩形外部SVG

它应该是简单的：

那就是，没什么

---

下面是更新后的JSFIDLE:

因此，通过删除该行，

svg.someFunction（）

引用的是svg的初始实例化，其中存储了实际的svg元素？更新的fiddle with transition:Yes，这是正确的：因为您之前定义了

var svg=d3。选择（“body”）.append（“svg”）

，所以您的

var svg

引用了追加的svg。顺便说一句，您可以使用一个简单的

merge（）

：我已经看过D3API中的

merge（）

。我假设它将新数据与旧数据合并，即使只传递一个参数？它不会合并数据，而是合并选择。