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");

我不知道他们为什么会有不同的结果。不要 var circle = sampleSVG.selectAll（“circle”）。data（[32,57,112,293]）; 与 var circle = sampleSVG.selectAll（“圈“）; circle.data（[32,57,112,293]）; ？

Answer 1

您遇到的问题是您没有在第二个代码段中将调用结果保存到data()。此调用返回一个选择，但您不将其保存在变量中。 circle仍然只是您之前选择的结果，因此.enter()为空。

D3中的圆圈选择

1 个答案: