d3：现有元素是不可见的

Question

在this fiddle中，我试图将每个数据点的多个SVG元素附加到画布上，如下所示：

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。