d3選擇的是什麼？

這是一些代碼。它命名不清，是錯誤的。原來的例子只有圓圈，所以這就是爲什麼選擇圓，但現在它有組。但是，此代碼此刻正常工作。它像我所期望的那樣繪製正方形和圓形。d3選擇的是什麼？

使用控制檯，我看到'圈'是Array[3]但我無法弄清楚元素是什麼或他們的類型。自從它啓動以來，它怎麼可能theres 3因爲沒有svg元素被創建？

反正我想知道什麼圈子真的應該被稱爲？做一個全選「g」似乎給了我同樣的效果。我猜測selectAll試圖做一個選擇，並有0個元素，但繼續以某種方式工作或可能selectAll實際返回svg，但在這種情況下，爲什麼我創建一個新的變量。另外我不確定爲什麼這些例子和我正在做數據。實際上，circle是否返回了我現在設置數據的內部d3對象？它與svg或dom有什麼關係？我只是困惑爲什麼我selectAll和調用選擇數據。

<!DOCTYPE html> 
<meta charset="utf-8"> 
<body> 
<style> 
</style> 

<script src="http://d3js.org/d3.v3.js"></script> 
<script> 


(function() { 

var svg = d3.select('body').append('svg').attr('width', 900); 

var circle = svg.selectAll("circle") 
    .data([32, 57, 293]); 

circle.enter() 
.append("g") 
.call(function(gs) { 
    gs.append("rect").attr("width", 20).attr("height", 20).attr("x", String); 
    gs.append("circle").attr("cy", 90).attr("cx", String).attr("r", Math.sqrt); 
}) 
.attr('class', 'test'); 
circle.exit().remove() 

})(); 

</script> 
</body>

來源

2013-01-11 BruteCode

circle目前持有3個SVGGElements，或"g" S，其中的每一個保持圈，哪些是.append在你的例子-ed的矩形。

從MDN：

的克元件是用於組對象的容器。應用於g元素的轉換在其所有子元素上執行。應用的屬性由子元素繼承。另外，它可以用來定義複雜的對象，稍後可以使用該元素進行引用。

selectAll("some-container")將返回與該名稱匹配的元素或將創建一個新元素並返回它。見https://github.com/mbostock/d3/wiki/Selections#wiki-d3_selectAll

嘗試增加這些第27行，看看你的圈子中的x值：

alert("x1: " + d3.select(circle.selectAll("circle")[0][0]).attr("cx")); 
alert("x2: " + d3.select(circle.selectAll("circle")[1][0]).attr("cx")); 
alert("x3: " + d3.select(circle.selectAll("circle")[2][0]).attr("cx"));

來源

2013-01-11 21:39:43 circuitBurn

d3選擇的是什麼？

回答

相關問題