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

Question

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

我试着学习下面的代码。然而，为了创建一个路径，代码生成了一个参数svg.selectAll，然后绑定数据集。我对此很好奇，并将对象操纵成一个任意的东西，它仍然有效。

我想我大致理解了enter((、update((和exit((的概念。然而，在这种情况下，它给我带来了很大的挑战。为什么我必须先选择虚拟对象并制作一些东西？根据D3中enter((的概念，一旦执行了enter，新分配的对象应该被分配给我创建的所有路径，但它不是伪参数selectAll("andom"(实际上没有任何作用。

下面是我所质疑的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对象的例子。