Question

select（）和selectAll（）有什么区别？

为什么第二个不附加p标签？

divSelection = d3.select('#div-vis').selectAll('p').data(['dummy']).enter().append('p');

divSelection = d3.select('#div-vis').select('p').data(['dummy']).enter().append('p');

Answer 1

来自Nested Selections：

嵌套选择还有另一个微妙但关键的副作用：它为每个组设置父节点。父节点是选择的隐藏属性，用于确定添加输入元素的位置。 ... select和selectAll之间有一个重要的区别：select保留现有的分组，而selectAll创建一个新的分组。因此，调用select会保留原始选择的数据，索引甚至父节点！

当您说d3.select("#vis")时，选择的父节点仍然是文档元素。然后，当您说selectAll("p")时，将父节点定义为先前选择的#vis元素，因为selectAll是嵌套运算符。这只发生在selectAll而不是select。

Answer 2

在此HTML文档中：

<html>
<body>

  <div id="viz">
  </div>

<body>
</html>

应用此代码：

var viz = d3.select('#viz').selectAll('p').data([0])
  .enter().append('p');

给出了这个结果：

<html>
<body>

  <div id="viz">
    <p></p>
  </div>

<body>
</html>

这是因为selectAll()基于前面的select方法定义了一个父元素，即select('#viz')。就这样：

console.log(viz[0].parentNode) // <div id="viz">

然而，如果您在第一个HTML文档中执行以下代码：

var viz = d3.select('#viz').select('p').data([0])
  .enter().append('p');

它给你这个结果：

<html>
<body>

  <div id="viz">
  </div>

<body>
<p></p> <!-- your p element is appended to <html> as its parent element
</html>

由于需要selectAll()来重新定义您选择的父元素，因此您所选内容的父元素仍然是默认设置的<html>。如果我们记录选择的父节点：

console.log(viz[0].parentNode) // <html>

请记住selections are arrays (groups) of arrays of elements。写viz[0]得到第一组元素，而不是你选择的第一个元素。要获得第一个元素，您应该写：

console.log(viz[0][0].parentNode)

这将为您提供DOM树中该特定元素的父元素，而不是您的d3选择组。

select（）和selectAll（）之间有什么区别

2 个答案: