d3附加並輸入問題

Question

所以我遇到一個問題，當遵循一個非常簡單的d3教程。從本質上講，我試圖通過數據綁定到當前SVG圈要素然後調用enter.append加入SVG圈要素如下圖所示：

var svg =d3.select("body").selectAll("svg"); 
var circle = svg.selectAll("circle"); 
var w=window.innerWidth; 
console.log(circle); 
circle.data([500,57,112,200,600,1000]); 


circle.enter().append("circle") 
    .attr("cy",function(d) { 
     return (d) 
     }) 
    .attr("cx", function(i){ 
     return (i*100) 
    }) 
    .attr("r", function(d) { 
     return Math.sqrt(d); 
     }) 

這似乎是它會增加3個新的圈子元素（因爲我已經有3個創建）。然而，而不是獲取添加這3組新的圓的元素，我遇到了這個錯誤：

Uncaught TypeError: Object [object SVGCircleElement],[objectSVGCircleElement],[object SVGCircleElement] has no method 'enter'

我已基本完成與段落同樣的事情，它似乎很好地工作：

var p =d3.select("body").selectAll("p") 
.data([4, 8, 15, 16, 23, 42]) 
.text(function(d) { return "I'm number " + d + "!"; }); 

//Enter  
p.enter().append("p") 
.text(function(d) { return "I'm number " + d + "!"; }) 
.style("color", function(d, i) { 
return i % 2 ? "#000" : "#eee"; 
}); 

但是，一旦我嘗試添加SVG元素，我仍然會遇到同樣的錯誤。

似乎應該只是一個語法錯誤或什麼的，但我已經通過代碼5萬億次，並且找不到任何東西。

任何幫助是非常感謝，並感謝您事先爲您的時間。

艾薩克

Answer 1

你想打電話enter上的circle.data而不是circle本身的結果。

var circle = svg.selectAll("circle"); 
circle.data([500,57,112,200,600,1000]).enter().append("circle"); 

你在正確的p例如通過存儲data在p變量回歸這樣做。而在您的circle示例中，您將d3.select.selectAll的回報存儲在您的circle變量中。