在 D3 中，为什么我需要选择选择一个虚拟对象来创建一些东西？

Question

我有一个关于使用 d3 创建路径的问题。

我试图研究如下代码。 但是，为了创建路径，代码创建了一个参数 svg.selectAll 然后绑定数据集。我对此很好奇并将对象操纵为任意事物，它仍然有效。

我想我大致了解了enter()、update()和exit()的概念。 但是，这个案子，对我的挑战很大。 为什么我必须先选择虚拟对象并制作一些东西？ 并且根据 D3 中 enter() 的概念，一旦执行 enter，新分配的对象应该分配给我创建的所有路径，但它不是 虚拟参数 selectAll('random') 实际上什么也没做。

我质疑的 svg 部分如下。

  svg.selectAll("random")
    .data(allDensity)
    .enter()
    .append("path")
      .attr("transform", function(d){console.log(d3.values(d));return("translate(0," + (yName(d.key)-height) +")" )})
      .datum(function(d){return(d.density)})
      .attr("fill", "#69b3a2")
      .attr("stroke", "#000")
      .attr("stroke-width", 1)
      .attr("d",  d3.line()
          .curve(d3.curveBasis)
          .x(function(d,i) { return x(d[0]); })
          .y(function(d,i) { return y(d[1]); })
      )

整个代码：https://codepen.io/jotnajoa/pen/dyogmOz

Answer 1

d3 的强项在于修改它之前创建的对象。如果您不提供虚拟对象，则 d3 需要显式检查以查看它是否已创建。通过提供一个虚拟对象，不再需要这样的测试。此外，在复杂的页面上，虚拟对象会在 html 树中提供放置 d3 对象的确切位置。

请注意，d3 思想非常开放，如果您真的需要，您可以自己创建元素，尤其是对于整个页面只是一个 d3 对象的示例。