0

我正在尝试在 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 个圆圈。

这是为什么？谢谢你。

4

2 回答 2

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

将选择所有现有circle元素并将数据绑定circleB到它们。您已经circle在 binding 之后创建了 10 个circleA，因此现在circleB绑定到前 6 个现有circle元素。由于不必创建新元素（现有元素被“重用”），因此.enter()选择是空的，没有任何反应。

因此，总体问题是您试图将不同的数据绑定到相同的元素。如果要为每个数据集创建元素，则必须修改选择器。例如，您可以为属于不同数据集的元素赋予不同的类：

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

svg.selectAll("circle.b")
.data(circleB)
.enter()
.append('circle')
.attr('class', 'b')
//...
于 2013-07-04T09:54:57.883 回答
1

这是因为 D3 将数据与元素匹配的方式。默认情况下，匹配是通过索引完成的。也就是说，在您随后的.data(...).selectAll(...)调用中，您将选择现有的圆圈并按索引将它们与数据匹配。由于圆圈多于数据项，因此.enter()选择为空。

对此的解决方案是通过可选的第二个参数提供匹配函数.data()，例如.data(..., function(d) { return d; }).

于 2013-07-04T09:56:09.750 回答