瞭解D3選擇

Question

var svg = d3.select("body").append("svg") 
... 
var nodes = svg.append("circle") 
.data(line.nodes); 

line.nodes是一個包含多個對象的數組，我想d3創建一個與每個對象綁定的圓。但是，上面的代碼只創建一個圈，綁定到數據數組中的第一個對象。爲什麼這對數據數組中的其餘對象來說不是相同的？

Answer 1

你需要告訴D3爲不存在​​選擇的所有元素創建節點。您可以使用selectAll和enter來完成此操作。閱讀邁克·博斯托克的關於如何運作的細節以及幕後魔術的選擇教程。 http://bost.ocks.org/mike/selection/

你會想沿着線代碼：

var svg = d3.select("body").append("svg") 
    // Set some properties of your svg here 
    .attr("height", height) 
    .attr(...) 

var nodes = svg.selectAll("circle") 
    //Bind the data to the selection 
    .data(line.nodes) 
    .enter().append("circle") 
    // Set attributes for the circles when D3 "enters" them. 
    .attr("r", myradius) 
    .attr(...) 

這可能是最難在第一繞到你的頭的部分是，你對尚不存在的元素調用selectAll的事實。這是「數據綁定」的一部分。您將數據綁定到一個選區，D3將隨着數據更改而創建，移除和更新元素。當您調用enter時，D3會爲每個尚未擁有它們的數據成員創建元素，方法是使用append調用的元素和後面鏈接的屬性。

Answer 2

綁定數據後應該調用.enter()。

var svg = d3.select("body").append("svg") 
var node = svg.selectAll(".circle"); 
node = node.data(graph.nodes) 
    .enter() 
    .append("circle") 
    .attr("cx", function(d){return d.x;}) 
    .attr("cy", function(d){return d.y;}) 
    .attr("r", 10)