D3中的圓圈選擇

Question

我有以下2個代碼片段。我想知道爲什麼第二個人不會生成四個圈子？

這一個會產生四個圓圈。

var sampleSVG = d3.select("#viz") 
    .append("svg") 
    .attr("width", 500) 
    .attr("height", 500); 
sampleSVG.append("circle").style("stroke", "gray").style("fill", "white").attr("r", 10).attr.("cx", 80).attr("cy", 70); 
sampleSVG.append("circle").style("stroke", "gray").style("fill", "white").attr("r", 10).attr.("cx", 140).attr("cy", 130); 
sampleSVG.append("circle").style("stroke", "gray").style("fill", "white").attr("r", 10).attr.("cx", 200).attr("cy", 190); 

var circle = sampleSVG.selectAll("circle").data([32, 57, 112, 293]); 
var enter = circle.enter().append("circle"); 
enter.attr("cy", 90) 
    .attr("cx", 160) 
    .attr("r", function(d){return Math.sqrt(d);}); 

circle.style("fill", "steelblue"); 

這一個不會產生四個圓圈。只顯示三個圓圈。

var sampleSVG = d3.select("#viz") 
    .append("svg") 
    .attr("width", 500) 
    .attr("height", 500); 
sampleSVG.append("circle").style("stroke", "gray").style("fill", "white").attr("r", 10).attr.("cx", 80).attr("cy", 70); 
sampleSVG.append("circle").style("stroke", "gray").style("fill", "white").attr("r", 10).attr.("cx", 140).attr("cy", 130); 
sampleSVG.append("circle").style("stroke", "gray").style("fill", "white").attr("r", 10).attr.("cx", 200).attr("cy", 190); 

var circle = sampleSVG.selectAll("circle"); 
circle.data([32, 57, 112, 293]); 
var enter = circle.enter().append("circle"); 
enter.attr("cy", 90) 
    .attr("cx", 160) 
    .attr("r", function(d){return Math.sqrt(d);}); 

circle.style("fill", "steelblue"); 

我不知道他們爲什麼會有不同的結果。 shoudn't var circle = sampleSVG.selectAll（「circle」）。data（[32,57,112,293]）;與相同var circle = sampleSVG.selectAll（「circle」）; circle.data（[32,57,112,293]）;？

Answer 1

您遇到的問題是您沒有將調用結果保存到第二個代碼段中的data()。這個調用返回一個選擇，但不是將它保存在一個變量中。 circle仍然只是您之前選擇的結果，所以.enter()爲空。