合并选择

D3 版本 3 中的更新模式

正确理解输入，更新和退出选择如何工作对于使用 D3 正确更改 dataviz 至关重要。

从 D3 版本 3 开始（实际上，从版本 2 开始），此代码段可以设置输入和更新选项的转换（ 此处为现场演示 ）：

var divs = body.selectAll("div")
    .data(data);//binding the data

divs.enter()//enter selection
    .append("div")
    .style("width", "0px");

divs.transition()
    .duration(1000)
    .style("width", function(d) { return d + "px"; })
    .attr("class", "divchart")
    .text(function(d) { return d; });

过渡后给出这个结果：

https://i.stack.imgur.com/fTIHv.jpg

但是，如果我们使用 D3 版本 4，完全相同的代码会发生什么？你可以在这个现场演示中看到它 ： 没有 ！

为什么？

D3 版本 4 中更新模式的更改

我们来看看代码。首先，我们有 divs。此选择将数据绑定到 <div>。

var divs = body.selectAll("div")
    .data(data); 

然后，我们有 divs.enter()，这是一个包含所有具有不匹配元素的数据的选择。这个选择包含我们第一次调用函数 draw 时的所有 div，我们将它们的宽度设置为零。

divs.enter()
    .append("div")
    .style("width", "0px");

然后我们有 divs.transition()，这里我们有一些有趣的行为：在 D3 版本 3 中，divs.transition() 使得 enter 选项中的所有 <div> 都变为它们的最终宽度。但这没有任何意义！ divs 不包含 enter 选项，不应修改任何 DOM 元素。

有一个原因，为什么这个奇怪的行为已经在 D3 版本 2 和 3 中引入（ 源于此处 ），并且它在 D3 版本 4 中被纠正。因此，在上面的现场演示中，没有任何反应，这是预期的！ 此外，如果单击该按钮，则会显示前六个条形图，因为它们现在处于更新选项中，而不再出现在输入选项中。

对于通过输入选择进行的转换，我们必须创建单独的变量，或者更简单的方法，合并选择 ：

divs.enter()//enter selection
    .append("div")
    .style("width", "0px")
    .merge(divs)//from now on, enter + update selections
    .transition().duration(1000).style("width", function(d) { return d + "px"; })
    .attr("class", "divchart")
    .text(function(d) { return d; });

现在，我们合并了输入和更新选项。了解它在现场演示中的工作原理。