d3.js
Concepts de base SVG utilisés dans la visualisation D3.js

Système de coordonnées

Dans un système de coordonnées mathématiques normal, le point x = 0, y = 0 est situé dans le coin inférieur gauche du graphique. Mais dans le système de coordonnées SVG, ce point (0,0) se trouve dans le coin supérieur gauche du «canvas», il est en quelque sorte similaire à CSS lorsque vous spécifiez la position absolue / fix et utilisez top et left pour contrôler le point exact de l'élément.

Il est essentiel de garder à l’esprit que plus les valeurs en SVG augmentent, plus les formes diminuent.

Disons que nous allons créer un diagramme de dispersion avec chaque point correspondant à la valeur de l'axe et à la valeur y. Pour mettre à l'échelle la valeur, vous devez définir le domaine et la plage comme suit:

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

Cependant, si vous gardez les paramètres comme ceci, les points seront basés sur le bord horizontal supérieur au lieu de la ligne horizontale inférieure comme prévu.

La bonne chose à propos de d3 est que vous pouvez facilement changer cela par un simple ajustement dans le paramétrage du domaine:

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

Avec le code ci-dessus, le point zéro du domaine correspond à la hauteur du SVG, qui est la ligne inférieure du graphique dans les yeux du spectateur, tandis que la valeur maximale des données source correspondra au point zéro du SVG. système de coordonnées, dont la valeur maximale pour les téléspectateurs.

le Élément

<rect> représente un rectangle, en dehors des propriétés esthétiques telles que le trait et le remplissage, le rectangle doit être défini par son emplacement et sa taille.

Quant à l'emplacement, il est déterminé par les attributs x et y. L'emplacement est relatif au parent du rectangle. Et si vous ne spécifiez pas l'attribut x ou y, la valeur par défaut sera 0 par rapport à l'élément parent.

Après avoir spécifié l'emplacement, ou plutôt le "point de départ" du rect, la prochaine chose à faire est de spécifier la taille, ce qui est essentiel si vous voulez réellement dessiner sth sur le canevas, c'est-à-dire si vous ne le faites pas. spécifiez les attributs de taille ou la valeur est définie sur 0, vous ne verrez rien sur le canevas.

Cas: graphique à barres

Continuez avec le premier scénario, les axes y, mais cette fois, essayons de dessiner un graphique à barres.

En supposant que le paramètre d'échelle y est identique, que l'axe y est correctement défini, la seule différence entre le diagramme de dispersion et ce diagramme à barres est que nous devons spécifier la largeur et la hauteur, en particulier la hauteur. Pour être plus précis, nous avons déjà le «point de départ», le reste consiste à utiliser des choses comme pour la hauteur:

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

le

<svg> élément <svg> est l'élément racine, ou le canevas tel que nous le dessinons.

Les éléments SVG peuvent être imbriqués les uns dans les autres et, de cette manière, les formes SVG peuvent être regroupées, tandis que toutes les formes imbriquées dans un élément seront positionnées par rapport à son élément englobant.

Une chose pourrait devoir être mentionnée, c'est que nous ne pouvons pas nous installer dans un autre, cela ne fonctionnera pas.

Cas: plusieurs graphiques

Par exemple, ce graphique à plusieurs donuts est composé de plusieurs éléments, qui contiennent respectivement un graphique en anneau. Cela peut être réalisé en utilisant l'élément, mais dans ce cas, nous ne voulons que mettre un tableau à côté l'un de l'autre, ce qui est plus pratique.

Une chose à garder à l'esprit est que nous ne pouvons pas utiliser l'attribut transform mais nous pouvons utiliser x, y pour la position.

le Élément

SVG ne prend actuellement pas en charge les sauts de ligne automatiques ou le retour à la ligne, c'est à ce moment-là qu'il faut venir en aide. élément positionne de nouvelles lignes de texte par rapport à la ligne de texte précédente. Et en utilisant dx ou dy dans chacun de ces segments, nous pouvons positionner le mot par rapport au mot qui le précède.

Cas: Annotation sur les axes

Par exemple, lorsque vous souhaitez ajouter une annotation sur 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)");

Ajouter correctement un élément SVG

C'est une erreur relativement courante: vous avez créé un élément rect , par exemple dans un graphique à barres, et vous souhaitez ajouter un libellé (par exemple, la valeur de cette barre). Ainsi, en utilisant la même variable que vous avez utilisée pour ajouter le rect et définir sa position x et y , vous ajoutez votre élément de text . Très logique, vous pouvez penser. Mais cela ne fonctionnera pas.

Comment cette erreur se produit-elle?

Voyons un exemple concret, un code très basique pour créer un graphique à barres ( violon ici ):

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

Ce qui nous donne ce résultat:

Mais vous voulez ajouter des éléments de texte, peut-être une simple valeur à chaque barre. Donc, vous faites ceci:

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

Et voilà: rien ne se passe! Si vous en doutez, voici le violon .

"Mais je vois l'étiquette!"

Si vous inspectez le SVG créé par ce dernier code, vous verrez ceci:

Et à ce stade, beaucoup de gens disent: "Mais je vois le tag texte, il est ajouté!". Oui, mais ça ne veut pas dire que ça va marcher. Vous pouvez ajouter n'importe quoi ! Voir ceci, par exemple:

svg.append("crazyTag");

Il vous donnera ce résultat:

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

Mais vous ne vous attendez à aucun résultat simplement parce que le tag est là, n'est-ce pas?

Ajouter des éléments SVG dans le bon sens

Découvrez quels éléments SVG peuvent contenir des enfants, en lisant les spécifications . Dans notre dernier exemple, le code ne fonctionne pas car les éléments rect ne peuvent pas contenir d’éléments de text . Alors, comment afficher nos textes?

Créez une autre variable et ajoutez le text au 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});

Et c'est le résultat:

Et voici le violon

SVG: l'ordre de dessin

C'est quelque chose qui peut être frustrant: vous faites une visualisation en utilisant D3.js mais le rectangle que vous voulez en haut est caché derrière un autre rectangle, ou la ligne que vous avez prévu d'être derrière un cercle est en fait dessus. Vous essayez de résoudre ceci en utilisant le z-index dans votre CSS, mais cela ne fonctionne pas (dans SVG 1.1).

L'explication est simple: dans un SVG, l'ordre des éléments définit l'ordre du "tableau", et l'ordre du tableau définit qui va en haut.

Les éléments d'un fragment de document SVG ont un ordre de dessin implicite, les premiers éléments du fragment de document SVG étant d'abord "peints". Les éléments suivants sont peints sur des éléments déjà peints.

Donc, supposons que nous ayons ce 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>

Il a quatre cercles. Le cercle bleu est le premier "peint", donc il sera inférieur à tous les autres. Ensuite, nous avons le jaune, puis le rouge et enfin le vert. Le vert est le dernier et il sera en haut.

Voici à quoi ça ressemble:

Modification de l'ordre des éléments SVG avec D3

Alors, est-il possible de changer l'ordre des éléments? Puis-je faire le cercle rouge devant le cercle vert?

Oui. La première approche à prendre en compte est l'ordre des lignes dans votre code: dessinez d'abord les éléments de l'arrière-plan, puis dans le code les éléments du premier plan.

Mais nous pouvons changer de manière dynamique l'ordre des éléments, même après qu'ils ont été peints. Il existe plusieurs fonctions JavaScript simples que vous pouvez écrire pour cela, mais D3 a déjà 2 fonctionnalités intéressantes: selection.raise() et selection.lower() .

Selon l'API:

selection.raise (): Réinsère chaque élément sélectionné, dans l'ordre, comme le dernier enfant de son parent. selection.lower (): Réinsère chaque élément sélectionné, dans l'ordre, comme premier enfant de son parent.

Donc, pour montrer comment manipuler l'ordre des éléments dans notre SVG précédent, voici un très petit code:

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

Qu'est ce que ça fait? Il sélectionne tous les cercles et, lorsque l'utilisateur survole un cercle, il sélectionne ce cercle et le place au premier plan. Très simple!

Et voici le JSFiddle avec le code live.