Czy ktoś może wyjaśnić różnicę między datum () a data () w D3.js? Widzę, że oba są używane i nie jestem pewien, dlaczego powinieneś wybrać jedno z nich?
javascript
d3.js
josephmisiti
źródło
źródło
enter()
, d3 wiąże resztę elementów tablicy z nowo utworzonymi elementami SVG.Po dokładnym przyjrzeniu się temu stwierdziłem, że odpowiedzi tutaj na SO nie są kompletne, ponieważ obejmują one tylko przypadek, gdy wywołujesz
selection.data
iselection.datum
zdata
parametrem wejściowym . Nawet w tym scenariuszu oba zachowują się inaczej, jeśli zaznaczenie jest pojedynczym elementem, a jeśli zawiera wiele elementów. Co więcej, obie te metody można również wywoływać bez żadnych argumentów wejściowych w celu przeszukiwania powiązanych danych / danych w zaznaczeniu, w którym to przypadku ponownie zachowują się inaczej i zwracają różne rzeczy.Edit - napisałem nieco bardziej szczegółową odpowiedź na to pytanie tutaj , ale post poniżej dość dużo przechwytuje wszystkie najważniejsze punkty dotyczące tych dwóch metod i jak różnią się one od siebie.
Podając
data
jako argument wejściowyselection.data(data)
dokładają wszelkich starań, aby wykonać dane dołącz pomiędzy elementamidata
tablicy z wyboru, w wyniku utworzeniaenter()
,exit()
orazupdate()
pozycje, które można następnie operować. Efektem końcowym tego jest, jeśli przejdziesz do tablicydata = [1,2,3]
, podejmowana jest próba połączenia każdego elementu danych (tj. Układu odniesienia) z zaznaczeniem. Każdy element zaznaczenia będzie miał związany tylko jeden element odniesieniadata
.selection.datum(data)
całkowicie pomija proces łączenia danych. To po prostu przypisuje całośćdata
wszystkim elementom zaznaczenia jako całości, bez dzielenia go, jak w przypadku łączenia danych. Więc jeśli chcesz powiązać całą tablicędata = [1, 2, 3]
z każdym elementem DOM w twoimselection
, wtedyselection.datum(data)
to osiągniesz.Gdy nie
data
podajesz argumentu wejściowegoselection.data()
weźmie powiązane dane dla każdego elementu w zaznaczeniu i połączy je w zwracaną tablicę. Tak więc, jeśliselection
składa się z 3 elementów DOM z danymi"a"
,"b"
a"c"
połączone ze sobą odpowiednioselection.data()
zwrotów["a", "b", "c"]
. Ważne jest, aby zauważyć, że jeśliselection
jest to pojedynczy element z (na przykład)"a"
związaną z nim datum , wówczasselection.data()
powróci["a"]
i nie będzie,"a"
jak niektórzy mogą się spodziewać.selection.datum()
ma sens tylko dla pojedynczego zaznaczenia, ponieważ jest zdefiniowany jako powrót układu odniesienia związanego z pierwszym elementem zaznaczenia. Tak więc w powyższym przykładzie z wyboru składający się z elementów DOM ze związanym z odniesienia"a"
,"b"
i"c"
,selection.datum()
po prostu wrócić"a"
.Mam nadzieję, że to pomaga wyjaśnić, w jaki sposób
selection.data
iselection.datum()
różnią się od siebie zarówno w przypadku udostępniania danych jako argument wejściowy i podczas odpytywania dla związanego odniesienia nie dostarczając żadnych argumentów wejściowych.PS - Najlepszym sposobem na zrozumienie, jak to działa, jest rozpoczęcie od pustego dokumentu HTML w Chrome i otwarcie konsoli i próba dodania kilku elementów do dokumentu, a następnie rozpoczęcie wiązania danych za pomocą
selection.data
iselection.datum
. Czasami o wiele łatwiej „coś” zrobić, robiąc, niż czytając.źródło
Oto kilka dobrych linków:
Dobra dyskusja na temat D3 „data ()”: zrozumienie, w jaki sposób D3.js wiąże dane z węzłami
D3 dla zwykłych śmiertelników
Wiki Mike'a Bostocka D3
Zgodnie z tym ostatnim:
źródło
Myślę, że wyjaśnienie podane przez HamsterHuey jest jak dotąd najlepsze. Aby go rozwinąć i przedstawić wizualnie różnice, stworzyłem przykładowy dokument, który ilustruje przynajmniej część różnic między
data
idatum
.Poniższa odpowiedź jest bardziej opinią wynikającą z zastosowania tych metod, ale cieszę się, że mogę je poprawić, jeśli się mylę.
Ten przykład można uruchomić poniżej lub w tym skrzypce .
Myślę, że
datum
łatwiej jest to uchwycić, ponieważ nie wykonuje łączenia, ale oczywiście oznacza to również, że ma różne przypadki użycia.Dla mnie jedną wielką różnicą - choć jest ich więcej - to fakt, że
data
jest to naturalny sposób wykonywania aktualizacji (na żywo) na wykresie d3, ponieważ cały wzorzec wchodzenia / aktualizowania / wychodzenia sprawia, że jest to proste, gdy tylko je dostaniesz.datum
z drugiej strony wydaje mi się, że lepiej nadaje się do przedstawień statycznych. W poniższym przykładzie mogę na przykład osiągnąć ten sam wynik, zapętlając oryginalną tablicę i uzyskując dostęp do danych przez indeks w ten sposób:Wypróbuj tutaj: https://jsfiddle.net/gleezer/e4m6j2d8/6/
Ponownie myślę, że jest to o wiele łatwiejsze do uchwycenia, ponieważ uwalniasz się od mentalnego obciążenia wynikającego ze schematu wchodzenia / aktualizowania / wychodzenia, ale gdy tylko będziesz musiał zaktualizować lub zmienić wybór, na pewno lepiej będzie się uciekać
.data()
.źródło