d3.js
Podstawowe koncepcje SVG stosowane w wizualizacji D3.js

System współrzędnych

W normalnym matematycznym układzie współrzędnych punkt x = 0, y = 0 znajduje się w lewym dolnym rogu wykresu. Ale w układzie współrzędnych SVG ten (0,0) punkt znajduje się w lewym górnym rogu „obszaru roboczego”, jest trochę podobny do CSS, gdy określasz pozycję do absolutnej / stałej i używasz górnej i lewej do sterowania dokładny punkt elementu.

Należy pamiętać, że wraz ze wzrostem y SVG kształty przesuwają się w dół.

Załóżmy, że utworzymy wykres rozproszenia, w którym każdy punkt odpowiada wartości osi i wartości y. Aby skalować wartość, musimy ustawić domenę i zakres w następujący sposób:

d3.svg.scale()
  .range([0, height])
  .domain([0,max])

Jeśli jednak zachowasz takie ustawienia, punkty będą oparte na górnej poziomej krawędzi zamiast na dolnej poziomej linii, zgodnie z oczekiwaniami.

Zaletą d3 jest to, że możesz łatwo to zmienić przez proste dostosowanie ustawień domeny:

d3.scale.linear()
  .range([height, 0])
  .domain([0, max])

Przy powyższym kodzie punkt zerowy domeny odpowiada wysokości SVG, która jest dolną linią wykresu w oczach widza, tymczasem maksymalna wartość danych źródłowych będzie odpowiadać punktowi zerowemu SVG układ współrzędnych, którego maksymalna wartość dla widzów.

The Element

<rect> reprezentuje prostokąt, oprócz właściwości estetycznych, takich jak obrys i wypełnienie, prostokąt powinien być określony przez położenie i rozmiar.

Jeśli chodzi o lokalizację, jest ona określana przez atrybuty xiy. Lokalizacja jest względem rodzica prostokąta. A jeśli nie określisz atrybutu x lub y, wartością domyślną będzie 0 względem elementu nadrzędnego.

Po określeniu lokalizacji, a raczej „punktu początkowego” prostokąta, następną rzeczą jest określenie rozmiaru, który jest niezbędny, jeśli chcesz narysować coś na płótnie, to znaczy, jeśli nie podaj atrybuty rozmiaru lub ustaw wartość na 0, nic nie zobaczysz na kanwie.

Przypadek: wykres słupkowy

Kontynuuj pierwszy scenariusz, osie y, ale tym razem spróbujmy narysować wykres słupkowy.

Zakładając, że ustawienie skali y jest takie samo, oś y jest również prawidłowo ustawiona, jedyną różnicą między wykresem rozrzutu a tym wykresem słupkowym jest to, że musimy określić szerokość i wysokość, a zwłaszcza wysokość. Mówiąc dokładniej, mamy już „punkt początkowy”, resztą jest użycie rzeczy takich jak wysokość:

.attr("height", function(d){
  return (height - yScale(d.value))
})

The

Element <svg> jest elementem głównym lub płótnem, gdy rysujemy na nim wykresy.

Elementy SVG mogą być zagnieżdżone w sobie, w ten sposób kształty SVG mogą być grupowane razem, tymczasem wszystkie kształty zagnieżdżone w elemencie zostaną ustawione względem elementu otaczającego.

Należy wspomnieć o jednej rzeczy: nie możemy zagnieździć się w innej, to nie zadziała.

Przypadek: wiele wykresów

Na przykład ta tabela wielu pączków składa się z wielu elementów, które zawierają odpowiednio tabelę pączków. Można to osiągnąć za pomocą elementu, ale w tym przypadku, gdy chcemy umieścić wykres pączka jeden po drugim obok siebie, jest to wygodniejsze.

Należy pamiętać, że nie możemy użyć atrybutu przekształcenia, ale możemy użyć x, y dla pozycji.

The Element

SVG nie obsługuje obecnie automatycznych podziałów linii ani zawijania słów - wtedy przychodzi na ratunek. element ustawia nowe wiersze tekstu w stosunku do poprzedniego wiersza tekstu. I używając dx lub dy w każdym z tych zakresów, możemy ustawić słowo w stosunku do słowa przed nim.

Przypadek: adnotacja na osiach

Na przykład, gdy chcemy dodać adnotację do y Axe:

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Temperature (ºF)");

Prawidłowe dodanie elementu SVG

Jest to stosunkowo częsty błąd: utworzyłeś element rect , na przykład na wykresie słupkowym, i chcesz dodać etykietę tekstową (powiedzmy, wartość tego paska). Tak więc, stosując tę samą zmienną, który został użyty do dołączania rect i określić swoją x i y położenia, należy dołączyć swój text elementu. Bardzo logiczna, może się wydawać. Ale to nie zadziała.

Jak dochodzi do tego błędu?

Zobaczmy konkretny przykład, bardzo podstawowy kod do tworzenia wykresu słupkowego ( skrzypce tutaj ):

var data = [210, 36, 322, 59, 123, 350, 290];

var width = 400, height = 300;

var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

var bars = svg.selectAll(".myBars")
    .data(data)
    .enter()
    .append("rect");

bars.attr("x", 10)
    .attr("y", function(d,i){ return 10 + i*40})
    .attr("width", function(d){ return d})
    .attr("height", 30);

Co daje nam ten wynik:

Ale chcesz dodać elementy tekstowe, być może prostą wartość do każdego paska. Więc robisz to:

bars.append("text")
   .attr("x", 10)
   .attr("y", function(d,i){ return 10 + i*40})
   .text(function(d){ return d});

I voila: nic się nie dzieje! Jeśli w to wątpisz, oto skrzypce .

„Ale widzę tag!”

Jeśli przejrzysz plik SVG utworzony przez ten ostatni kod, zobaczysz to:

I w tym momencie wiele osób mówi: „Ale widzę tag tekstowy, jest on dołączony!”. Tak, ale to nie znaczy, że zadziała. Możesz dołączyć wszystko ! Zobacz to na przykład:

svg.append("crazyTag");

To da ci ten wynik:

<svg>
    <crazyTag></crazyTag>
</svg>

Ale nie oczekujesz żadnego rezultatu tylko dlatego, że tag tam jest, prawda?

Dodaj elementy SVG we właściwy sposób

Dowiedz się, jakie elementy SVG mogą pomieścić dzieci, czytając specyfikacje . W naszym ostatnim przykładzie kod nie działa, ponieważ elementy rect nie mogą zawierać elementów text . Jak wyświetlić nasze teksty?

Utwórz kolejną zmienną i dołącz text do SVG:

var texts = svg.selectAll(".myTexts")
    .data(data)
    .enter()
    .append("text");

texts.attr("x", function(d){ return d + 16})
    .attr("y", function(d,i){ return 30 + i*40})
    .text(function(d){ return d});

I to jest wynik:

A oto skrzypce .

SVG: kolejność rysowania

Jest to coś, co może być frustrujące: tworzysz wizualizację za pomocą D3.js, ale prostokąt, który chcesz na górze, jest ukryty za innym prostokątem lub linia, którą planujesz być za jakimś okręgiem, faktycznie jest nad nim. Próbujesz rozwiązać ten problem za pomocą indeksu Z w swoim CSS, ale to nie działa (w SVG 1.1).

Wyjaśnienie jest proste: w SVG kolejność elementów określa kolejność „malowania”, a kolejność malowania określa, kto idzie na górę.

Elementy we fragmencie dokumentu SVG mają domyślną kolejność rysowania, a pierwsze elementy we fragmencie dokumentu SVG są najpierw „malowane”. Kolejne elementy są malowane na wcześniej malowane elementy.

Załóżmy, że mamy ten plik SVG:

<svg width="400" height=200>
    <circle cy="100" cx="80" r="60" fill="blue"></circle>
    <circle cy="100" cx="160" r="60" fill="yellow"></circle>
    <circle cy="100" cx="240" r="60" fill="red"></circle>
    <circle cy="100" cx="320" r="60" fill="green" z-index="-1"></circle>
</svg>

Ma cztery kręgi. Niebieskie koło jest pierwszym „namalowanym”, więc będzie zawierało wszystkie pozostałe. Potem mamy żółty, czerwony i wreszcie zielony. Zielony jest ostatni i będzie na górze.

Tak to wygląda:

Zmiana kolejności elementów SVG za pomocą D3

Czy można zmienić kolejność elementów? Czy mogę zrobić czerwone kółko przed zielonym kółkiem?

Tak. Pierwszym podejściem, o którym należy pamiętać, jest kolejność linii w kodzie: najpierw narysuj elementy tła, a następnie w kodzie elementy pierwszego planu.

Ale możemy dynamicznie zmieniać kolejność elementów, nawet po ich pomalowaniu. Istnieje kilka prostych funkcji JavaScript, które możesz napisać, aby to zrobić, ale D3 ma już 2 ładne funkcje: selection.raise() i selection.lower() .

Zgodnie z API:

selection.raise (): Ponownie wstawia każdy wybrany element, w kolejności, jako ostatnie dziecko jego rodzica. selection.lower (): Ponownie wstawia każdy wybrany element, w kolejności, jako pierwsze dziecko jego rodzica.

Aby pokazać, jak manipulować kolejnością elementów w naszym poprzednim pliku SVG, oto bardzo mały kod:

d3.selectAll("circle").on("mouseover", function(){
    d3.select(this).raise(); 
});

Co to robi? Wybiera wszystkie kręgi, a gdy użytkownik najedzie myszką na jedno koło, wybiera to konkretne koło i przenosi je na przód. Bardzo prosty!

A oto JSFiddle z kodem na żywo.