Javascript Can'；不要分组创建svg圆

我试图在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);

但是，SVG中只添加了

circleA

。B组和C组不在那里。我检查了DOM，实际上只创建了10个

标记，而不是创建了10+6+9=25个圆

为什么呢？多谢各位

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

将选择所有现有的

circle

元素，并将数据

circleB

绑定到它们。在绑定

circleA

之后，您已经创建了10个

circle

，因此现在

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')
//...

---

这是因为D3将数据匹配到元素的方式。默认情况下，按索引进行匹配。也就是说，在随后的

.data（…）.selectAll（…）

调用中，您将选择现有的圆圈，并按索引将其与数据进行匹配。由于圆圈多于数据项，因此

.enter（）

选择为空

---

解决方法是通过可选的第二个参数

.data（）

，提供匹配函数，例如

.data（…，函数（d）{return d；}）

，我现在理解原因，但我并不真正理解所述解决方案。我只是去读了api，但似乎仍然无法理解添加函数是如何工作的。如果您能帮助我理解这一点的话？函数告诉D3如何将数据与现有元素匹配。通过提供我建议的函数，您告诉我们要检查实际数据。也就是说，只有当已经存在由完全相同的数据生成的循环时，才会进行匹配。它利用了这样一个事实，即您的数据在所有阵列中都是唯一的，而阵列索引（默认行为）却不是唯一的。然而，这被认为是一种正常的做法，还是更像是一种快速解决方法，迫使它使用CSS选择器创建额外的圆？是否有所谓的“适当”方法或替代方法？这取决于数据。使用Lars建议的数据连接是另一种方法。但是，既然您已经说过您有三个不同的组，我不明白为什么使用类来“标记”每个组是不好的。