select（）和selectAll（）之间的区别是什么

select（）和selectAll（）有什么区别？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');

来源

2012-10-23 user1767809

Nested Selections来自：

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

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

来源

2012-10-23 15:15:58 mbostock

在该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]获取第一组元素，而不是您选择的第一个元素。为了得到你应该写的第一个元素：它会给你特定元素的父元素在DOM树，而不是在你的D3选择组

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

。

来源

2015-08-16 22:00:59 Federico

select（）和selectAll（）之间的区别是什么

回答

相关问题