d3js堆积的条形图未更新

Question

我正在d3js中使用堆积条形图进行实验，并遇到了enter exit选择的困难。 我使用d3.stack来获取由键组织的两个数组，然后尝试遵循常规更新模式。 我现在遇到的问题是，当我在下拉菜单中单击其他状态时，数据没有得到更新。 这是问题代码和完整项目的链接： http : //plnkr.co/edit/8N8b2yUYRF9zqRkjkIiO?p=preview

var series = g.append("g")

var seriesready = 
    series.selectAll("g")
    .data(stack(data))
    .enter().append("g")
    .attr("fill",function(d){console.log(d); return z(d.key)}) //not logging 
when I update the bar chart

var rectangles = 
    seriesready.selectAll("rect")
    .data(function(d){return d})

rectangles.exit().remove()

rectangles.enter().append("rect")
      .attr("width", x.bandwidth())
      .transition()
        .duration(1500)
        .attr("transform", function(d) {console.log(d); return "translate(" + x(d.data.Date) + ",0)"; })
        .attr("height", function(d) {
        return height - y(d[1]-d[0]);
      })
        .attr("y", function(d) {
        return y(d[1]-d[0]);
      });

我还认为我对应该删除或添加哪些选择感到困惑。 真的很感谢任何指针。 数据可视化很有趣，但是我仍然没有完全掌握数据绑定。

Answer 1

我还没有切换到版本4，但是我认为数据绑定方法是相同的。

您需要将键函数定义为.data()函数的第二个参数。

可以指定一个键函数来控制将哪个基准分配给哪个元素，从而替换默认的按索引联接。

https://github.com/d3/d3-selection/blob/master/README.md#selection_data

---

您更新的代码

http://plnkr.co/edit/wwdjJEflZtyACr6w9LiS?p=preview

更改后的代码：

var seriesUpdate = series.selectAll("g")
        .data(stack(data),d=>d)
var seriesready = seriesUpdate.enter().append("g")
        .attr("fill",function(d){return z(d.key)})

seriesUpdate.exit().remove()

将数据绑定到元素时，D3计算与选择有关的新数据/已存在数据/已删除数据。 默认情况下，它通过数据索引-输入数组的大小来执行此操作。 由于为密歇根州和俄亥俄州计算出的堆栈数据都返回了2组数据（受伤和死亡），因此D3将此视为“相同”数据，因此是update 。

如果定义键功能，则D3会将密歇根州和俄亥俄州的计算堆栈数据识别为“不同”数据，因此它是一个enter 。

使用按键功能时，首先选择俄亥俄时，回车选择的大小为2。 如果然后选择密歇根州，则密歇根州的输入选择为2号，俄亥俄州的出口选择为2号。