javascript - d3 : Existing elements are invisible

Question

在 this fiddle ，我尝试将每个数据点的多个 SVG 元素附加到 Canvas ，如下所示:

svg.selectAll("circle")
   .data(dataset)
   .enter()
   .append("circle")
   ....
   .append("line")

这些线条显示在 Firefox 检查器中，但不显示在可视化效果中。这是为什么？

Answer 1

您正在将元素相互嵌套 - 在 SVG 中无法执行此操作。您只能将元素嵌套在 g 元素内，即

g
|- circle
|- line

您可以通过为输入选择附加 g 元素并保留对它们的引用来创建此结构:

var newGs = svg.selectAll("g")
  .data(dataset)
  .enter()
  .append("g");
newGs.append("circle")
  ...
newGs.append("line")
  ....

完整演示 here .