合併選擇

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

現在，我們合併了輸入和更新選項。瞭解它在現場演示中的工作原理。