javascript - 一张画布，两组数据

Question

所以我有两组数据，我们称它们为 A 和 B，然后是一个画布 X

所以首先我这样做：

var selection=canvas.selectAll("circle")
                    .data(A)                    
selection.enter().append("circle")
selection
   .attr(...)
   .attr(...)

因此，这可以满足我的要求，并制作了我的第一组圈子。但是后来我想根据数据 B 制作第二组具有不同属性的圆圈，所以我尝试执行以下操作：

var selection2 = canvas.selectAll("circle")
selection2.enter().append("circle").data(B)
selection2
  .attr(...)
  .attr(...)

但是，这似乎不起作用，并且 selection2 会干扰选择一。我怎样才能让它工作？

Answer 1

只需将它们添加为具有不同选择器的元素...例如

var selection2 = canvas.selectAll(".circleb")
selection2.enter().append("circle").data(B)
selection2
  .classed(".circleb")
  .attr(...)
  .attr(...)

使用您当前的方法，您正在选择所有圆形 元素（当前绑定到数据集 A），并尝试将它们重新绑定到数据集 B。通过使用不同的选择器（根据我的示例），您可以创建第二组绑定的元素到数据集 B，将原始元素绑定到数据集 A。

已编辑以修复夜间故障（如评论中所指出的）