想在D3 - 選擇vs追加

有人可以解釋像我5這是如何這種D3語法實際工作？想在D3 - 選擇vs追加

var link = svg.selectAll('.link') 
    .data(links) 
    .enter().append('line') 
    .attr('class', 'link');

它似乎只是追加鏈接到樹。

但我如何閱讀是「選擇所有的類鏈接，並追加屬性類=鏈接」。在它們存在之前如何選擇令人費解。

爲什麼在項目實際存在之前有一個「選擇」？選擇真的意味着「插入」？

來源

2016-08-31 dcsan

此鏈接有一步一步解釋 - https://www.dashingd3js.com/binding-data-to-dom-elements – Gilsha

謝謝。這確實解釋了它，並回答了一個顯而易見的問題，即API是違反直覺的，因爲它會問「但是等等，什麼？」幾次。尼安德特人。 – dcsan

你甚至不需要最後一行'.attr（「class」，「.link」）'這個工作。閱讀：http：//stackoverflow.com/documentation/d3。js/2135/selections/16948 /這個角色的佔位符在輸入選擇＃t = 201608310519416966291 –

逐行分析將低於想：

選擇具有link類中的所有的DOM。

var link = svg.selectAll('.link')

爲所有這些鏈接綁定數據。這裏的數據鏈接是一個數組。 links[0]綁定到第一個DOM（如果存在）。 links[1]綁定到第二個DOM（如果存在）。 ..所以上

.data(links) 
.enter()

情況1： 如果數組鏈接有2個元件和選擇DOM元素具有0個元素。然後2行DOM將被附加到svg DOM。

案例2： 如果數組鏈接有2個元素，並且選擇DOM元素有1個元素。然後將1個新的線DOM附加到svg DOM。

案例3： 如果數組鏈接有2個元素，並且選擇DOM元素有2個或多個元素。然後將0個新行DOM添加到svg DOM。

.append('line') 
    .attr('class', 'link');

這將是一個很好read

來源

2016-08-31 05:03:40 Cyril

我不認爲這個答案是有道理的。對於所有這些鏈接......重點是在該表達式的開始處沒有鏈接。在「append」中的選擇之後，鏈接被創建*。 – dcsan

是的正確！之前沒有鏈接，所以'svg.selectAll（'。link'）'會給出一個空的選擇。那是我的情況1。在該空白選擇中，您將根據您傳遞的數據添加新鏈接。 – Cyril

其實我只是讀了關於連接的一個bostock塊。它沒有給出空的選擇，它用新創建的節點設置了一個「enter（）」。非常奇怪的API，但向後看和斜眼看，我可以看到它在做什麼。只是希望它更具可讀性。 – dcsan

我同意，這完全是混淆必須做出選擇，即使它存在之前。但通過在選擇上調用data(someDataArray)，此佔位符選擇現在綁定到您的數據。現在

，爲將enter的data在someDataArray每一件事情，D3將append相應的SVG line（並附相關數據）。

如果someDataArray發生變化，d3可以通過update更改連接的SVG節點的外觀，甚至可以刪除不再與exit關聯的數據的舊節點。

來源

2016-08-31 10:16:33 ksav

想在D3 - 選擇vs追加

回答

相關問題