Menu
What is the difference between select() and selectAll()?
Why doesn't the second one append a p tag?
divSelection = d3.select('#div-vis').selectAll('p').data(['dummy']).enter().append('p');
divSelection = d3.select('#div-vis').select('p').data(['dummy']).enter().append('p');
862
Select * Would return the entire table while Select Count(*) would return the number of rows.
selectAll("rect") takes a selection that already exists: D3 saved in in the DOM. This is why you need to pass a CSS selector to selectAll . D3 uses that selector to find the existing selection, saved in the DOM via a . __data__ attribute on each DOM node.
The reason I use SELECT COLUMN_NAMES is when using Stored Procedure, adding columns to the table will not screw your application. select * will give additional column (which you've just added to the table) and application will get additional column and may raise error.
From Nested Selections:
Nesting selections has another subtle yet critical side-effect: it sets the parent node for each group. The parent node is a hidden property on selections that determines where to append entering elements. … There is an important difference between select and selectAll: select preserves the existing grouping, whereas selectAll creates a new grouping. Calling select thus preserves the data, index and even the parent node of the original selection!
When you say d3.select("#vis"), the parent node of the selection is still the document element. When you then say selectAll("p"), you define the parent node as the previously-selected #vis element, because selectAll is a nesting operator. That only happens with selectAll and not select.
162
In this HTML document:
<html>
<body>
<div id="viz">
</div>
<body>
</html>
Applying this code:
var viz = d3.select('#viz').selectAll('p').data([0])
.enter().append('p');
Gives this result:
<html>
<body>
<div id="viz">
<p></p>
</div>
<body>
</html>
This is because selectAll() defines a parent element based on the preceding select method, which is select('#viz'). In that way:
console.log(viz[0].parentNode) // <div id="viz">
Whereas if you execute the following code in the first HTML document:
var viz = d3.select('#viz').select('p').data([0])
.enter().append('p');
It gives you this result:
<html>
<body>
<div id="viz">
</div>
<body>
<p></p> <!-- your p element is appended to <html> as its parent element
</html>
Since a selectAll() is required to redefine your selection's parent element, the parent element of your selection is still <html> which is set by default. If we log the selection's parent node:
console.log(viz[0].parentNode) // <html>
Remember that selections are arrays (groups) of arrays of elements. Writing viz[0] gets the first group of elements, not the first element of your selection. To obtain the first element you should write:
console.log(viz[0][0].parentNode)
Which will give you the parent element of that specific element in the DOM tree, not in your d3 selection group.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
