web-dev-qa-db-fra.com

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

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

J'ai regardé le exemple de donut et 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é documentation , mais je n'ai pas compris ce que .append("g") est en train d'ajouter

Est-ce même spécifique D3?

Vous cherchez des conseils ici

javascriptd3.js
118
daydreamer

Il ajoute un élément 'g' au SVG. g element est utilisé pour regrouper des formes SVG , donc non, il n'est pas spécifique à d3.

107
Cihan Keser

Je suis venu ici d'une courbe d'apprentissage D3 aussi. Comme déjà indiqué, ceci 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 (grouping).

Ce n'est pas très 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>-element n'a pas d'attributs x et y. Pour déplacer le contenu d'un <g>-element vous ne pouvez le faire qu’en utilisant l’attribut transform, en utilisant la fonction "translate", comme ceci: transform = "translate (x, y)".

13
kramamurthi