javascript - 无法成组创建 svg 圆圈

Question

我正在尝试在 SVG 中创建三组圆圈。我给他们打电话circleA circleB和circleC我打算给它们涂上不同的颜色。

var circleA = [
    [50,48],[106,35],[107,42],[119,52],[139,58],
    [26,60],[65,68],[117,73],[123,70],[145,78]
];

var circleB = [
    [38,81],[48,69],[48,81],
    [111,99],[128,92],[153,92]
];

var circleC = [
    [24,106],[46,99],[43,112],[63,105],
    [62,122],[92,126],[141,122],[132,145],
    [23,145]
];

//... omitting code for scale handling ... 

var svg = d3.select("body")
        .append("svg")
        .attr("width", svgw)
        .attr("height", svgh);


    svg.selectAll("circle")
   .data(circleA)
   .enter()
   .append("circle")
   .attr("cx", function(d) { return xScale(d[0]); })
   .attr("cy", function(d) { return yScale(d[1]); })
   .attr("r", 10);

   svg.selectAll("circle")
   .data(circleB)
   .enter()
   .append("circle")
   .attr("cx", function(d) { return xScale(d[0]); })
   .attr("cy", function(d) { return yScale(d[1]); })
   .attr("r", 10);

   svg.selectAll("circle")
   .data(circleC)
   .enter()
   .append("circle")
   .attr("cx", function(d) { return xScale(d[0]); })
   .attr("cy", function(d) { return yScale(d[1]); })
   .attr("r", 10);

但是只有circleA已添加到 SVG 中。 B组和C组都不在。我检查了 DOM 确实只有 10 <circle>创建了 10 + 6 + 9 = 25 个圈子，而不是创建了 10 + 6 + 9 = 25 个圈子。

这是为什么呢？谢谢。

Answer 1

svg.selectAll("circle")
.data(circleB)

将选择所有现有的circle元素并将数据circleB绑定(bind)到它们。绑定(bind) circleA 后，您已经创建了 10 个 circle，因此现在 circleB 已绑定(bind)到前 6 个现有 circle 元素。由于不需要创建新元素(现有元素被“重用”)，因此.enter()选择为空并且什么也没有发生。

所以，总体问题是您试图将不同的数据绑定(bind)到相同的元素。如果您想为每个数据集创建元素，则必须修改选择器。例如，您可以为属于不同数据集的元素指定不同的类:

svg.selectAll("circle.a")
.data(circleA)
.enter()
.append('circle')
.attr('class', 'a')
//...

svg.selectAll("circle.b")
.data(circleB)
.enter()
.append('circle')
.attr('class', 'b')
//...