D3：關於全選的困惑（）創建新的元素

我是新來的D3和正在使用由斯科特·默裏（這是偉大BTW）「爲Web交互式數據可視化」讓我開始的時候。現在我所看到的所有內容都是按照描述的方式工作的，但是在查看創建新元素的過程時，有些事情讓我感到困惑。簡單的例子（從斯科特·默裏）：D3：關於全選的困惑（）創建新的元素

svg.selectAll("circle") 
    .data(dataset) 
    .enter() 
    .append("circle");

名稱"circle"用於返回一個空的選擇（這是確定，因爲我學會）的selectAll。然後通過將相同的名稱放入.append來追加圓圈。大！

現在是什麼讓我困惑是，當你想再次做同樣的事情會發生什麼。所以你有第二個數據集，並希望以同樣的方式生成新的圈子。使用相同的代碼只是替換數據集顯然不會工作，因爲selectAll("circle")不會再返回空選擇。所以我玩了一圈，發現我可以在selectAll中使用任何名字，甚至將它留空如下：selectAll()

Scott Murrays的例子總是隻對每個數據集使用一種類型（圓形，文本等）。最後，我在官方的例子類似

svg.selectAll("line.left") 
    .data(dataset) 
    .enter() 
    .append("line") 
    .attr ... 

svg.selectAll("line.right") 
    .data(dataset) 
    .enter() 
    .append("line"); 
    .attr ...

發現現在我的問題：如何真正使用在selectAll("ENTRY")這個項目嗎？它可以在以後用於以任何方式再次引用這些元素，還是僅僅是一個可以以任何方式選擇的虛擬名稱，只需要返回一個空的選擇？我無法再在結果DOM或對象結構中的任何位置找到此條目。

謝謝你解除我的困惑。

來源

2013-07-26 nothing9

在呼叫.data()之前撥打selectAll()的電話真的只在您更改/更新顯示的內容時很重要。想象一下，你已經有了一些圈子，你想改變他們的立場。該座標由數據決定的，所以一開始你會做這樣的事情

svg.selectAll("circle") 
    .data(data) 
    .enter() 
    .append("circle") 
    .attr("cx", function(d) { return d; }) 
    .attr("cy", function(d) { return d; });

現在這個新數據具有相同數量的元素，但不同的座標。要更新圓上的位置，所有你需要做的是

svg.selectAll("circle") 
    .data(newData) 
    .attr("cx", function(d) { return d; }) 
    .attr("cy", function(d) { return d; });

會發生什麼事是，D3在newData現有的圓圈（你selectAll選擇什麼）的元素相匹配。這樣你不需要再次追加圓圈（畢竟他們已經在那裏了），而只需要更新它們的座標。

注意的是，在第一次調用，你沒有在技術上需要選擇circle秒。這是一個很好的做法，但只是爲了清楚你想要做什麼，並避免意外選擇其他元素的問題。

你可以找到更多關於此例如更新模式here。

來源

2013-07-26 08:54:37

確定，但「圓」還是解決了SVG元素，對不對？如果我的svg有額外的圈子會怎麼樣？或者讓我說我有兩組圓圈的數據集。我可以按照像circle.left和circle.right這樣的方式對它們進行分組嗎？ – nothing9

是的，在這種情況下，選擇器引用SVG元素。如果你有更多的圈子，他們將被選中並匹配。您可以通過例如分配CSS類並相應地進行選擇（在'circle「引用CSS類之後'.left'）。 –

Aaaaaahahhhh。謝謝你，現在你讓我感到困惑了！ :) – nothing9

D3：關於全選的困惑（）創建新的元素

回答

相關問題