javascript - 如何更新发散堆积条形图d3js中的数据

Question

我做了一个 plunker将数据从一个 csv 文件更新到另一个 csv 文件，yaxis 会相应更新，但矩形不会。

.attr("height", function(d) { return Math.abs(y(d[0])) - y(d[1]); }); 部分该代码仍然具有来自先前文件的旧数据(我猜)。

我猜这是因为我没有在 updateData() 函数中声明 .data(series)，我记得在另一个图表中做过类似的事情

g.selectAll(".bar").data(series).transition() 

等等...但这在此图表中不起作用。

我想不通，感谢任何帮助!

Answer 1

问题是您没有将新数据加入现有的柱状图。

为了使这项工作顺利进行，您需要在将系列加入 g 元素时为数据类别指定一个键以确保一致性(尽管我注意到类别 1 在第一个数据集中为正，而在第一个数据集中为负第二个，但我猜这是测试数据)

这是更新后的 plunkr ( https://plnkr.co/edit/EoEvVWiTji7y5V3SQTKJ?p=info )，下面突出显示了相关代码:

g.append("g")
        .selectAll("g")
        .data(series, function(d){ return d.key  }) //add function to assign a key
        .enter().append("g")
        .attr("class", "bars")  //so its easy to select later on
 //etc
...



function updateData() {

    d3.csv("data2.csv", type, function(error, data) {

        ///etc      

        let bars = d3.selectAll(".bars")  //select the g elements

        bars.data(series, function(d){ return d.key  }) //join the new data
        .selectAll(".bar")
        .data(function(d) { return d; })
        .transition()   
      .duration(750)
            .attr("y", function(d) { return y(d[1]); })
            .attr("height", function(d) { return Math.abs(y(d[0])) - y(d[1]); });