合併選擇

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

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