D3.js - API Shapes

Questo capitolo discute i diversi generatori di forme in D3.js.

Configurazione dell'API

È possibile configurare l'API Shapes utilizzando il seguente script.

<script src = "https://d3js.org/d3-path.v1.min.js"></script>
<script src = "https://d3js.org/d3-shape.v1.min.js"></script>
<script>

</script>

Generatori di forme

D3.js supporta diverse forme. Esaminiamo in dettaglio le forme prominenti.

API Arcs

Il generatore di arco produce una forma circolare o anulare. Abbiamo utilizzato questi metodi API nel capitolo precedente dei grafici a torta. Comprendiamo in dettaglio i vari metodi dell'API di Arcs.

  • d3.arc() - Questo metodo viene utilizzato per creare un nuovo generatore di arco.

  • arc(args)- Viene utilizzato per generare un arco con gli argomenti specificati. Di seguito vengono definite le impostazioni predefinite con i raggi e gli angoli di un oggetto.

<script>
   var arc = d3.arc();
   arc({
      innerRadius: 0,
      outerRadius: 100,
      startAngle: 0,
      endAngle: Math.PI / 2
   });
</script>

  • arc.centroid(args) - Questo metodo viene utilizzato per calcolare il punto medio [x, y] della linea centrale dell'arco con gli argomenti specificati.

  • arc.innerRadius([radius])- Questo metodo viene utilizzato per impostare il raggio interno dal raggio dato e restituire un generatore di arco. È definito di seguito:

function innerRadius(d) {
   return d.innerRadius;
}

  • arc.outerRadius([radius])- Questo metodo viene utilizzato per impostare il raggio esterno dal raggio specificato e restituire un generatore di arco. È definito come segue.

function outerRadius(d) {
   return d.outerRadius;
}

  • arc.cornerRadius([radius])- Questo metodo viene utilizzato per impostare il raggio dell'angolo dal raggio dato e restituire un generatore di arco. È definito come segue.

function cornerRadius() {
   return 0;
}

Se il raggio dell'angolo è maggiore di zero, gli angoli dell'arco vengono arrotondati utilizzando i cerchi del raggio specificato. Il raggio dell'angolo non può essere maggiore di (outerRadius - innerRadius) / 2.

  • arc.startAngle([angle])- Questo metodo viene utilizzato per impostare l'angolo iniziale della funzione dall'angolo specificato. È definito come segue:

function startAngle(d) {
   return d.startAngle;
}

  • arc.endAngle([angle])- Questo metodo viene utilizzato per impostare l'angolo finale sulla funzione dall'angolo specificato. È definito come segue.

function endAngle(d) {
   return d.endAngle;
}

  • arc.padAngle([angle])- Questo metodo viene utilizzato per impostare l'angolo del pad sulla funzione dall'angolo specificato. È definito come segue.

function padAngle() {
   return d && d.padAngle;
}

  • (x) arc.padRadius([radius])- Questo metodo viene utilizzato per impostare il raggio del pad sulla funzione specificata dal raggio specificato. Il raggio del pad determina la distanza lineare fissa che separa gli archi adiacenti, definita padRadius * padAngle.

  • (xi) arc.context([context]) - Questo metodo viene utilizzato per impostare il contesto e restituire un generatore di arco.

Pies API

Questa API viene utilizzata per creare un generatore di torta. Abbiamo eseguito questi metodi API nel capitolo precedente. Discuteremo tutti questi metodi in dettaglio.

  • d3.pie() - Costruisce un nuovo generatore di torta con le impostazioni predefinite.

  • pie(data[, arguments])- Questo metodo viene utilizzato per generare una torta per i valori di matrice specificati. Restituisce un array di oggetti. Gli oggetti sono gli angoli dell'arco del datum. Ogni oggetto ha le seguenti proprietà:

    • data- il dato di input; l'elemento corrispondente nella matrice dei dati di input.

    • value - il valore numerico dell'arco.

    • index - indice dell'arco.

    • startAngle - l'angolo di inizio dell'arco.

    • endAngle - l'angolo finale dell'arco.

    • padAngle - l'angolo del pad dell'arco.

  • pie.value([value])- Questo metodo viene utilizzato per impostare il valore sulla funzione specificata e genera una torta. È definito come segue:

function value(d) {
   return d;
}

  • pie.sort([compare])- Questo metodo viene utilizzato per ordinare i dati alla funzione specificata e genera una torta. La funzione di confronto è definita come segue.

pie.sort(function(a, b) 
   { return a.name.localeCompare(b.name); }
);

Qui, la funzione di confronto accetta due argomenti "a" e "b", ogni elemento dalla matrice di dati di input. Se l'arco per "a" deve essere prima dell'arco per "b", il comparatore deve restituire un numero inferiore a zero. Se l'arco per "a" deve essere dopo l'arco per "b", il comparatore deve restituire un numero maggiore di zero.

  • pie.sortValues([compare])- Questo metodo viene utilizzato per confrontare il valore dalla funzione data e genera una torta. La funzione è definita come segue.

function compare(a, b) {
   return b - a;
}

  • pie.startAngle([angle])- Questo metodo viene utilizzato per impostare l'angolo iniziale della torta sulla funzione specificata. Se l'angolo non è specificato, restituisce l'angolo iniziale corrente. È definito come segue.

function startAngle() {
   return 0;
}

  • pie.endAngle([angle])- Questo metodo viene utilizzato per impostare l'angolo finale della torta sulla funzione specificata. Se l'angolo non è specificato, restituisce l'angolo finale corrente. È definito come segue.

function endAngle() {
   return 2 * Math.PI;
}

  • pie.padAngle([angle])- Questo metodo viene utilizzato per impostare l'angolo del pad sulla funzione specificata e genera la torta. La funzione è definita come segue.

function padAngle() {
   return 0;
}

API Lines

L'API Lines viene utilizzata per generare una riga. Abbiamo utilizzato questi metodi API inGraphscapitolo. Esaminiamo ogni metodo in dettaglio.

  • d3.line() - Questo metodo viene utilizzato per creare un nuovo generatore di linea.

  • line(data) - Questo metodo viene utilizzato per generare una riga per il dato array di dati.

  • line.x([x])- Questo metodo viene utilizzato per impostare la funzione di accesso x sulla funzione specificata e genera una riga. La funzione è definita di seguito,

function x(d) {
   return d[0];
}

  • line.y([y])- Questo metodo viene utilizzato per impostare la funzione di accesso "y" sulla funzione specificata e genera una riga. La funzione è definita come segue.

function y(d) {
   return d[1];
}

  • line.defined([defined])- Questo metodo viene utilizzato per impostare la funzione di accesso definita sulla funzione specificata. È definito come segue.

function defined() {
  return true;
}

  • line.curve([curve]) - Serve per impostare la curva e genera la linea.

  • line.context([context])- Questo metodo viene utilizzato per impostare il contesto e genera una linea. Se il contesto non è specificato, restituisce null.

  • d3.lineRadial()- Questo metodo viene utilizzato per creare una nuova linea radiale; è equivalente al generatore di linee cartesiane.

  • lineRadial.radius([radius])- Questo metodo viene utilizzato per disegnare una linea radiale e la funzione di accesso restituisce il raggio. Prende la distanza dall'origine (0,0).

Nel prossimo capitolo impareremo a conoscere l'API Colors in D3.js.