13

select() 和 selectAll() 有什么区别？

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

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

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

2 回答 2

17

从嵌套选择：

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

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

于 2012-10-23T15:15:58.950 回答
3

在此 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()需要 a 来重新定义您的选择的父元素，因此您的选择的父元素仍然<html>是默认设置的。如果我们记录选择的父节点：

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

请记住，选择是元素数组的数组（组）。写作viz[0]获取第一组元素，而不是您选择的第一个元素。要获得第一个元素，您应该编写：

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

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

于 2015-08-16T22:00:59.867 回答