0

我有以下 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");相同 circle.data([32, 57, 112, 293]); ?

4

1 回答 1

1

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

于 2013-07-12T20:43:28.453 回答