Question

我希望拨打d3.selectAll来回复任何内容。看起来这应该是一种常见的模式，比如 -

d3.selectAll(false) // maybe?
.data([10,20,30])
.enter()
// ... manipulate

这将要求选择器不返回任何内容。特别是这似乎是this implementation of a donut chart -

中的一个问题

var g = svg.selectAll(".arc")
  .data(pie(data))
.enter().append("g")
  .attr("class", "arc");

这是邪恶的，因为“arc”是一个全局类，可以在网页的其他地方使用，这是库代码。然而，没有好的方法可以表达我们想要选择的东西。弧类？这显然是对阶级的一种使用，并且具有这种副作用。我不能说“弧”，因为它们只是过于笼统的路径，尽管that's what's used in this example, only with circles。

所以似乎是一个悬而未决的问题。

Answer 1

我认为你错误解释了你有时用d3选择不存在的元素的原因。

在d3的数据连接范例中，选择要绑定数据的元素。如果这些元素尚不存在，则d3知道将它们放在Enter选项中，以便您可以使用.enter()来解决它们。您问题中链接的article是对此的最佳解释。我劝你再次讨论它。

更具体地说，让我们看看你提到的圆环图表可视化：

var g = svg.selectAll(".arc")
    .data(pie(data))
  .enter().append("g")
    .attr("class", "arc");

为什么我们选择.arc即使它还不存在？

一些背景知识：d3是一种功能性的编程方法，这意味着我们不经常告诉它如何做事，而是我们想要做什么。我们要求d3将我们的数据（在这种情况下，无论pie(data)返回）绑定到DOM中的.arc元素。也就是说，我们希望将数组中的每个数据与每个DOM元素相关联或“绑定”。然后我们返回三个选项：Enter，Update和Exit。

Enter 选项包含数据中存在但尚未具有相应DOM元素的所有元素的占位符。此选择通常与.append()结合使用以创建新的DOM节点。

更新选项包含已存在的实际DOM元素，但现在将绑定到新数据。

退出选项包含在新数据集中没有相应数据的DOM元素。这些通常是.remove()。

回到arc示例，第一次运行此代码时，DOM中没有.arc个元素。因此，我们得到一个Enter选择，其中包含新数据的有效占位符。然后我们通过附加一些新元素并给它们.arc类来对这些占位符进行操作，以便下次我们运行此代码，比如我们获取新数据时，他们会被发现。

此代码的结构方式，如果我们第二次提供具有相同长度的新数据，则Enter选项将为空，Update选择将为full。但它不会包含占位符，而是包含我们第一次添加的DOM元素。

这就是说，在我们想要将新数据绑定到尚未存在的元素时，只选择任何内容的用例是常见的。但我们并没有选择任何本身，而是我们将新数据绑定到即将创建的DOM元素。

在旁注中，选择.arc可能不是“邪恶”，因为我们说svg.selectAll()。也就是说，只选择属于.arc子元素的svg元素，从而本地化我们的选择。

用D3选择无，有用吗？

1 个答案: