d3.js
Concetti base SVG utilizzati nella visualizzazione D3.js

Sistema di coordinate

In un normale sistema di coordinate matematiche, il punto x = 0, y = 0 si trova nell'angolo in basso a sinistra del grafico. Ma nel sistema di coordinate SVG, questo (0,0) punto è nell'angolo in alto a sinistra della "tela", è un po 'simile al CSS quando si specifica la posizione in assoluto / correzione e si usa in alto a sinistra per controllare il punto esatto dell'elemento.

È fondamentale tenere presente che man mano che aumenta l'SVG, le forme si spostano verso il basso.

Diciamo che creeremo uno scatterplot con ciascun punto corrispondente al valore dell'asse e al valore y. Per ridimensionare il valore, dobbiamo impostare il dominio e l'intervallo in questo modo:

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

Tuttavia, se si mantengono le impostazioni in questo modo, i punti si baseranno sul bordo orizzontale superiore anziché sulla linea orizzontale inferiore come previsto.

La cosa bella di d3 è che puoi facilmente modificarlo con una semplice regolazione nelle impostazioni del dominio:

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

Con il codice sopra, il punto zero del dominio è corrispondente all'altezza del SVG, che è la linea inferiore del grafico negli occhi dello spettatore, nel frattempo, il valore massimo dei dati di origine sarà corrispondente al punto zero del SVG sistema di coordinate, che è il valore massimo per gli spettatori.

Il Elemento

<rect> rappresenta il rettangolo, a parte le proprietà estetiche come il tratto e il riempimento, il rettangolo deve essere definito in base alla posizione e alle dimensioni.

Per quanto riguarda la posizione, è determinata dagli attributi x e y. La posizione è relativa al genitore del rettangolo. E se non si specifica l'attributo x o y, il valore predefinito sarà 0 relativo all'elemento genitore.

Dopo aver specificato la posizione, o meglio il "punto di partenza" del rect, la prossima cosa è specificare la dimensione, che è essenziale se vuoi effettivamente disegnare sth sulla tela, vale a dire, se non lo fai specificare gli attributi di dimensione o il valore è impostato come 0, non vedrete nulla sulla tela.

Caso: grafico a barre

Continua con il primo scenario, gli assi y, ma questa volta, proviamo a disegnare un grafico a barre.

Supponendo che l'impostazione della scala y sia la stessa, anche l'asse y è impostato correttamente, l'unica differenza tra il diagramma a dispersione e questo grafico a barre è che, è necessario specificare la larghezza e l'altezza, in particolare l'altezza. Per essere più specifici, abbiamo già il "punto di partenza", il resto è usare cose come per l'altezza:

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

Il

<svg> elemento <svg> è l'elemento radice o la tela mentre stiamo disegnando grafici su di esso.

Gli elementi SVG possono essere annidati l'uno dentro l'altro, e in questo modo, le forme SVG possono essere raggruppate insieme, nel frattempo tutte le forme nidificate all'interno di un elemento saranno posizionate rispetto al suo elemento di chiusura.

Una cosa che potrebbe aver bisogno di menzionare è che, non possiamo annidare in un altro, non funzionerà.

Caso: più grafici

Ad esempio, questo grafico a più ciambelle è composto da più elementi, che contengono rispettivamente un grafico a forma di ciambella. Questo può essere ottenuto usando l'elemento, ma in questo caso in cui vogliamo solo mettere uno schema ad anello uno ad uno uno accanto all'altro, è più conveniente.

Una cosa da tenere a mente è che non possiamo usare l'attributo transform su tuttavia possiamo usare x, y per la posizione.

Il Elemento

Attualmente SVG non supporta le interruzioni di riga automatiche o il word wrapping, quando arriva il salvataggio. elemento posiziona nuove righe di testo in relazione alla riga di testo precedente. E usando dx o dy all'interno di ciascuna di queste spanne, possiamo posizionare la parola in relazione alla parola che la precede.

Caso: annotazione sugli assi

Ad esempio, quando vogliamo aggiungere un'annotazione su y Ax:

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)");

Aggiunta corretta di un elemento SVG

Questo è un errore relativamente comune: hai creato un elemento rect , ad esempio in un grafico a barre, e vuoi aggiungere un'etichetta di testo (diciamo, il valore di quella barra). Quindi, utilizzando la stessa variabile che si è utilizzato per aggiungere il rect e definire il suo x e y posizione, si aggiunge il vostro text elemento. Molto logico, potresti pensare. Ma questo non funzionerà.

Come si verifica questo errore?

Vediamo un esempio concreto, un codice molto semplice per la creazione di un grafico a barre ( violino qui ):

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);

Il che ci dà questo risultato:

Ma vuoi aggiungere alcuni elementi di testo, magari un valore semplice per ogni barra. Quindi, fai questo:

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

E, voilà: non succede nulla! Se ne dubiti, ecco il violino .

"Ma sto vedendo il tag!"

Se controlli l'SVG creato da quest'ultimo codice, vedrai questo:

E a questo punto molte persone dicono: "Ma sto vedendo il tag di testo, è aggiunto!". Sì, lo è, ma questo non significa che funzionerà. Puoi aggiungere qualsiasi cosa ! Vedi questo, per esempio:

svg.append("crazyTag");

Ti darà questo risultato:

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

Ma non ti aspetti alcun risultato solo perché il tag è lì, vero?

Aggiungi gli elementi SVG nel modo corretto

Scopri quali elementi SVG possono contenere i bambini, leggendo le specifiche . Nel nostro ultimo esempio, il codice non funziona perché gli elementi rect non possono contenere elementi di text . Quindi, come visualizzare i nostri testi?

Crea un'altra variabile e aggiungi il text a 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});

E questo è il risultato:

Ed ecco il violino .

SVG: l'ordine di disegno

Questo è qualcosa che può essere frustrante: fai una visualizzazione usando D3.js ma il rettangolo che vuoi sopra è nascosto dietro un altro rettangolo, o la linea che avevi pianificato di essere dietro ad una cerchia è in realtà sopra di essa. Cerchi di risolvere questo problema usando lo z-index nel tuo CSS, ma non funziona (in SVG 1.1).

La spiegazione è semplice: in un file SVG, l'ordine degli elementi definisce l'ordine del "dipinto" e l'ordine del dipinto definisce chi va in cima.

Gli elementi di un frammento di documento SVG hanno un ordine di disegno implicito, con i primi elementi nel frammento del documento SVG che vengono "dipinti" per primi. Gli elementi successivi sono dipinti sopra gli elementi precedentemente dipinti.

Quindi, supponiamo di avere questo 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>

Ha quattro cerchi. Il cerchio blu è il primo "dipinto", quindi sarà muggito tutti gli altri. Poi abbiamo quello giallo, poi quello rosso e infine quello verde. Quello verde è l'ultimo e sarà in cima.

Ecco come appare:

Modifica dell'ordine degli elementi SVG con D3

Quindi, è possibile modificare l'ordine degli elementi? Posso fare il cerchio rosso davanti al cerchio verde?

Sì. Il primo approccio che devi avere in mente è l'ordine delle linee nel tuo codice: disegna prima gli elementi dello sfondo e successivamente nel codice gli elementi del primo piano.

Ma possiamo cambiare dinamicamente l'ordine degli elementi, anche dopo che sono stati dipinti. Esistono diverse semplici funzioni JavaScript che puoi scrivere per fare ciò, ma D3 ha già 2 funzioni interessanti, selection.raise() e selection.lower() .

Secondo l'API:

selection.raise (): reinserisce ciascun elemento selezionato, in ordine, come ultimo figlio del suo genitore. selection.lower (): reinserisce ciascun elemento selezionato, in ordine, come primo figlio del suo genitore.

Quindi, per mostrare come manipolare l'ordine degli elementi nel nostro precedente SVG, ecco un codice molto piccolo:

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

Che cosa fa? Seleziona tutti i cerchi e, quando l'utente passa con il mouse su un cerchio, seleziona quel particolare cerchio e lo porta in primo piano. Molto semplice!

Ed ecco il JSFiddle con il codice live.