D3.js: qu'est-ce que «g» dans le code .append («g») D3.js?

129

Je suis nouveau D3.js, j'ai commencé à apprendre aujourd'hui seulement

J'ai regardé l' exemple du beignet et j'ai trouvé ce code

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

J'ai cherché de la documentation , mais je n'ai pas compris ce qui .append("g")est ajouté

Est-ce même D3spécifique?

Vous cherchez des conseils ici

javascript d3.js

— rêveur
source

5

Bonnes réponses ci-dessous. Cela vaut peut-être la peine de regarder la vidéo YouTube suivante de D3Vienno sur le regroupement en D3. youtube.com/watch?v=SYuFy1j8SGs En fait, si vous débutez, toute la série vaut la peine d'être regardée :-).

— d3noob

116

Il ajoute un élément «g» au SVG. gL'élément est utilisé pour regrouper les formes SVG , donc non, ce n'est pas spécifique à d3.

— Cihan Keser
source

1

La documentation MDN pour javascript éclaire toujours: developer.mozilla.org/en/docs/Web/SVG/Element/g . Un stylo expérimental peut être trouvé ici: codepen.io/ahujamoh/pen/brRpWM

— Mohit

17

Je suis également venu ici d'une courbe d'apprentissage d3. Comme déjà souligné, ce n'est pas spécifique à d3, il est spécifique aux attributs svg. Voici un très bon tutoriel expliquant les avantages de svg: g (regroupement).

Ce n'est pas si différent du cas d'utilisation du «regroupement» dans des dessins graphiques tels que ceux que vous feriez dans une présentation PowerPoint.

http://tutorials.jenkov.com/svg/g-element.html

Comme indiqué dans le lien ci-dessus: pour traduire, vous devez utiliser translate (x, y):

Le <g>-elementn'a pas d'attributs x et y. Pour déplacer le contenu d'un, <g>-elementvous ne pouvez le faire qu'en utilisant l'attribut transform, en utilisant la fonction "translate", comme ceci: transform = "translate (x, y)".

— kramamurthi
source