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（）之間的區別是什麼

回答

相關問題