Czy wybór Enter() może być ponownie użyty po dodaniu/wstawieniu?

Question

Mam scenariusz, w którym chcę użyć sprzężenia danych, aby dołączyć 2 nowe elementy dla każdego elementu danych.

ja pierwotnie robi coś takiego:

var y = d3.selectAll("line") 
    .data([123, 456]); 

y.enter().append("line"); // assume attr and style set 
y.enter().append("line"); 

y.transition()... 

Przed Myślałem, że to przez, spodziewałem się, że wybór Aktualizacja używany w moim przejściu będzie zawierać połączone dołącza od wyboru wejść. Ale oczywiście to nie zadziałało, ponieważ w danym elemencie danych jest tylko jeden slot.

Więc zmieniono kod tak, że wciąż używał tej samej selekcji enter() dwa razy, ale potem ponownie wybrał dla nowych elementów w celu dokonania przejścia.

To podejście zadziałało, ale moje pytanie brzmi, czy jest to zalecany sposób postępowania. Czy powinienem się upewnić, że przestaniesz używać funkcji enter() po dodaniu/wstawieniu? Czy jest to w porządku, użyj go do tworzenia wielu elementów, o ile pamiętam, że wybór aktualizacji będzie zawierał tylko te elementy, które zostały utworzone jako ostatnie?

Jeśli okaże się, że to pomyłka, jaki jest lepszy sposób na osiągnięcie tego?

Answer 1

Nie. Celem łączenia danych jest synchronize elements with data, tworzenie, usuwanie lub aktualizowanie elementów w razie potrzeby. Jeśli utworzysz elementy dwa razy, elementy nie będą już odpowiadać jeden do jednego z powiązaną tablicą danych.

Jeśli chcesz, aby dwa elementy pasowały do ​​każdej bazy danych, wówczas dołącz najpierw element grupy (G), aby ustalić mapowanie jeden do jednego z danych do elementów. Następnie dołączyć elementy potomne w razie potrzeby. Otrzymana struktura jest tak:

<g> 
    <line class="line1"></line> 
    <line class="line2"></line> 
</g> 
<g> 
    <line class="line1"></line> 
    <line class="line2"></line> 
</g> 

Na przykład

var g = svg.selectAll("g") 
    .data([123, 456]); 

var gEnter = g.enter().append("g"); 
gEnter.append("line").attr("class", "line1"); 
gEnter.append("line").attr("class", "line2");