Jaka jest różnica między select() i selectAll()?Jaka jest różnica między select() i selectAll()
Dlaczego drugi nie dodaje znacznika 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');
zagnieżdżanie pozycje ma jeszcze inną subtelną krytyczny efekt uboczny: ustawia węzeł nadrzędny dla każdej grupy. Węzeł nadrzędny jest ukrytą właściwością w selekcji, która określa miejsce dołączania wprowadzanych elementów. ... Istnieje istotna różnica między select i selectAll: select zachowuje istniejące grupowanie, podczas gdy selectAll tworzy nowe grupowanie. Wywołanie selekcji w ten sposób zachowuje dane, indeks, a nawet węzeł nadrzędny pierwotnego wyboru!
Po powiedzeniu d3.select("#vis"), węzeł nadrzędny zaznaczenia jest nadal elementem dokumentu. Kiedy następnie powiesz selectAll("p"), zdefiniujesz węzeł nadrzędny jako wcześniej wybrany element #vis, ponieważ selectAll jest operatorem zagnieżdżania. Dzieje się tak tylko z selectAll i nie wybierz.
W tym dokumencie HTML:
<html>
<body>
<div id="viz">
</div>
<body>
</html>
stosujące niniejszy kod:
var viz = d3.select('#viz').selectAll('p').data([0])
.enter().append('p');
Daje to wynik:
<html>
<body>
<div id="viz">
<p></p>
</div>
<body>
</html>
To dlatego selectAll() definiuje element nadrzędny na podstawie poprzedniego select metoda, która jest select('#viz'). W ten sposób:
console.log(viz[0].parentNode) // <div id="viz">
Zważywszy, jeśli wykonać następujący kod w pierwszym dokumencie HTML:
var viz = d3.select('#viz').select('p').data([0])
.enter().append('p');
Daje to wynik:
<html>
<body>
<div id="viz">
</div>
<body>
<p></p> <!-- your p element is appended to <html> as its parent element
</html>
Ponieważ selectAll() jest wymagane do przedefiniować element nadrzędny zaznaczenia, element nadrzędny dla zaznaczenia jest nadal ustawiony domyślnie na <html>. Jeśli zarejestrujemy węzeł nadrzędny zaznaczenia:
console.log(viz[0].parentNode) // <html>
Pamiętaj, że selections are arrays (groups) of arrays of elements. Zapisywanie viz[0] uzyskuje pierwszą grupę elementów, a nie pierwszy element Twojego wyboru. Aby uzyskać pierwszy element należy napisać:
console.log(viz[0][0].parentNode)
która daje elementu nadrzędnego tego konkretnego elementu w drzewie DOM, a nie w grupie selekcji D3.