Question

我已经制作了一个plunker，用于将数据从一个csv文件更新到另一个csv文件，yaxis会相应更新，但矩形不会更新。

代码的.attr("height", function(d) { return Math.abs(y(d[0])) - y(d[1]); });部分仍然包含上一个文件中的旧数据（我猜测）。

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

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

如何在分歧的堆积条形图中更新数据d3js

1 个答案: