Odnosząc się do tego przykładu:
http://vallandingham.me/stepper_steps.html
wydaje się, że biblioteki D3 i jQuery są bardzo podobne w tym sensie, że obie wykonują manipulację DOM w sposób łańcuchowy.
Ciekawi mnie, jakie funkcje ułatwia D3 niż jQuery i odwrotnie. Istnieje wiele bibliotek graficznych i wizualizacyjnych, które wykorzystują jQuery jako podstawę (np.highcharts, flot, wijmo).
Proszę podać konkretne przykłady ich różnic.
Odpowiedzi:
D3 jest oparty na danych, ale jQuery nie: z jQuery bezpośrednio manipulujesz elementami, ale z D3 dostarczasz dane i wywołania zwrotne za pomocą unikalnych D3 data(), enter()a exit()metody i D3 manipuluje elementami.
D3 jest zwykle używany do wizualizacji danych, ale jQuery służy do tworzenia aplikacji internetowych. D3 ma wiele rozszerzeń wizualizacji danych, a jQuery ma wiele wtyczek do aplikacji internetowych.
Obie są bibliotekami JavaScript do manipulacji DOM, mają selektory CSS i płynne API i są oparte na standardach internetowych, co sprawia, że wyglądają podobnie.
Poniższy kod jest przykładem użycia D3, które nie jest możliwe w jQuery (spróbuj w jsfiddle ):
// create selection
var selection = d3.select('body').selectAll('div');
// create binding between selection and data
var binding = selection.data([50, 100, 150]);
// update existing nodes
binding
.style('width', function(d) { return d + 'px'; });
// create nodes for new data
binding.enter()
.append('div')
.style('width', function(d) { return d + 'px'; });
// remove nodes for discarded data
binding.exit()
.remove();d3 ma głupi opis. jQuery i d3 wcale nie są do siebie podobne, po prostu nie używasz ich do tych samych celów.
Celem jQuery jest ogólne manipulowanie domenami. Jest to zestaw narzędzi javascript ogólnego przeznaczenia do wszystkiego, co chcesz zrobić.
d3 został zaprojektowany głównie w celu ułatwienia tworzenia błyszczących wykresów z danymi. Zdecydowanie powinieneś go używać (lub czegoś podobnego lub czegoś na nim zbudowanego), jeśli chcesz tworzyć graficzne wizualizacje danych.
Jeśli chcesz mieć bibliotekę JS ogólnego przeznaczenia do wszystkich potrzeb związanych z interaktywnymi formularzami, rozważ jQuery lub proto lub mootools. Jeśli chcesz czegoś malutkiego, rozważ underscore.js. Jeśli potrzebujesz czegoś z iniekcją zależności i testowalnością, rozważ AngularJS.
Ogólne porównanie przewodnik z wikipedii.
Rozumiem, dlaczego ktoś mógłby pomyśleć, że są podobni. Używają podobnej składni selektora - $ ('SELECTOR'), a d3 to niezwykle potężne narzędzie do wybierania, filtrowania i obsługi elementów html, zwłaszcza podczas łączenia tych operacji w łańcuch. d3 próbuje ci to wyjaśnić na swojej stronie domowej, twierdząc, że jest biblioteką ogólnego przeznaczenia, ale faktem jest, że większość ludzi używa jej, gdy chcą tworzyć wykresy . Używanie go do zwykłej manipulacji domem jest dość niezwykłe, ponieważ krzywa uczenia się d3 jest tak stroma. Jest to jednak znacznie bardziej ogólne narzędzie niż jQuery i generalnie ludzie budują inne, bardziej szczegółowe biblioteki (takie jak nvd3) na podstawie d3, zamiast używać go bezpośrednio.
Odpowiedź @ JohnS jest również bardzo dobra. Fluent API = łańcuch metod. Zgadzam się również co do tego, dokąd wtyczki i rozszerzenie prowadzą cię z bibliotekami.
Ostatnio używam trochę obu. Ponieważ d3 używa selektorów Sizzle, możesz prawie mieszać selektory.
Pamiętaj tylko, że d3.select ('# mydiv') nie zwraca tego samego co jQuery ('# mydiv'). To ten sam element DOM, ale jego instancja jest tworzona za pomocą różnych konstruktorów. Na przykład, powiedzmy, że masz następujący element:
<div id="mydiv" rel="awesome div" data-hash="654687867asaj"/>Weźmy kilka typowych metod:
> d3.select('#mydiv').attr('rel') ;
"awesome div"
> jQuery('#mydiv').attr('rel');
"awesome div"Wydaje się uzasadnione. Ale jeśli pójdziesz trochę dalej:
> d3.select('#mydiv').data();
[undefined]
> jQuery('#mydiv').data();
Object {hash: "654687867asaj"}.attr('data-hash', '654687867asaj')
.data()w jQuery jest w zasadzie skrótem do dostępu do atrybutu html data-<custom-name>. Ale w D3 nie ma to nic wspólnego z atrybutami danych html, a to, co robi w D3, zwraca nową selekcję jako złączenie danych przekazanych w argach z już wybranymi elementami.
D3 to nie tylko wizualne wykresy. Dokumenty oparte na danych. Używając d3, łączysz dane z węzłami dom. Dzięki SVG jesteśmy w stanie tworzyć wykresy, ale D3 to o wiele więcej. Możesz zastąpić struktury, takie jak Backbone, Angular i Ember, używając D3.
Nie jestem pewien, kto przegłosował, ale pozwólcie, że dodam więcej jasności.
Wiele witryn żąda danych z serwera, który zwykle pochodzi z bazy danych. Kiedy witryna otrzyma te dane, musimy zaktualizować stronę o nową zawartość. Wiele frameworków to robi, a d3 również to robi. Dlatego zamiast używać elementu svg, możesz zamiast tego użyć elementu html. Gdy zadzwonisz do przerysowania, szybko zaktualizuje stronę o nową zawartość. Naprawdę fajnie jest nie mieć wszystkich dodatkowych narzutów, takich jak jquery, backbone + jego wtyczki, angular itp. Wystarczy znać d3. Teraz d3 nie ma wbudowanego systemu routingu. Ale zawsze możesz go znaleźć.
Z drugiej strony, jego jedynym celem jest napisanie mniejszej ilości kodu. To tylko skrócona wersja javascript, która została przetestowana w wielu przeglądarkach. Jeśli nie masz dużo jQuery na swojej stronie. To świetna biblioteka. Jest to proste i wymaga wiele wysiłku podczas tworzenia javascript dla wielu przeglądarek.
Jeśli spróbujesz zaimplementować jquery w stylu d3, będzie to dość powolne, ponieważ nie zostało zaprojektowane do tego zadania, podobnie d3 nie jest przeznaczony do wysyłania danych na serwery, jest przeznaczony tylko do konsumowania i renderowania danych .
d3 jest stworzony do wizualizacji danych, robi to poprzez filtrowanie przez obiekty DOM i stosowanie transformacji.
jQuery jest stworzony do manipulacji DOM i ułatwiania życia wielu podstawowych zadań JS.
Jeśli chcesz zamienić dane w ładne, interaktywne obrazy, D3 jest niesamowity.
Jeśli chcesz przenieść, manipulować lub w inny sposób modyfikować swoją stronę internetową, jQuery jest Twoim narzędziem.
Świetne pytanie!
Chociaż obie biblioteki mają wiele takich samych funkcji, wydaje mi się, że największą różnicą między jQuery a D3 jest skupienie.
jQuery to biblioteka ogólnego przeznaczenia, która koncentruje się na pracy w różnych przeglądarkach i jest łatwa w użyciu.
D3 koncentruje się na danych (manipulacja i wizualizacja) i obsługuje tylko nowoczesne przeglądarki. I chociaż wygląda jak jQuery, jest o wiele trudniejszy w użyciu.
Oba mogą rozwiązać ten sam cel tworzenia i manipulowania DOM (niezależnie od tego, czy będzie to HTML, czy SVG). D3 przedstawia API, które upraszcza typowe zadania, które można podjąć podczas generowania / manipulowania DOM na podstawie danych. Robi to dzięki natywnej obsłudze wiązania danych za pośrednictwem funkcji data (). W jQuery musiałbyś ręcznie przetworzyć dane i zdefiniować sposób powiązania z danymi, aby wygenerować DOM. Z tego powodu twój kod staje się bardziej proceduralny i trudniejszy do uzasadnienia i przestrzegania. Dzięki D3 jest mniej kroków / kodu i jest bardziej deklaratywny. D3 zapewnia również funkcje wyższego poziomu, które pomagają w generowaniu wizualizacji danych w SVG. Funkcje takie jak range (), domain () i scale () ułatwiają pobieranie danych i nanoszenie ich na wykres. Funkcje takie jak axis () również ułatwiają rysowanie typowych elementów interfejsu użytkownika, których można oczekiwać na wykresie / wykresie.