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

我也觉得我对于应该删除或添加哪些选项感到困惑。非常感谢任何指针。数据viz很有趣，但我还没有完全掌握数据绑定。

Answer 1

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

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

可以指定键功能来控制分配哪个数据哪个元素替换了默认的join-by索引。

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将其视为＆＃34;相同＆＃34;数据，因此它是update。

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

使用按键功能，当您首先选择俄亥俄州时，输入选择与俄亥俄州的大小为2。如果您随后选择密歇根州，则输入选择的大小为2，密歇根州，退出选择大小为2，俄亥俄州。

d3js堆积条形图未更新

1 个答案: