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

Je suis nouveau sur D3.js, a commencé à apprendre aujourd'hui que

J'ai regardé le donut exemple 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é la documentation, mais n'a pas compris ce que .append("g") ajoute

Est-il même D3 spécifique?

La recherche de conseils ici

  • Les bonnes réponses à venir ci-dessous. Possible de la peine de vérifier les éléments suivants de la vidéo youtube à partir de D3Vienno sur le regroupement D3. youtube.com/watch?v=SYuFy1j8SGs en Fait, si vous êtes débutant, l'ensemble de la série vaut la peine de regarder :-).
InformationsquelleAutor daydreamer | 2013-06-12
  1. 107

    Il ajoute un 'g' élément à la SVG. g élément est utilisé pour regrouper des formes SVG ensemble, donc non ce n'est pas d3 spécifiques.

    InformationsquelleAutor Cihan Keser
  2. 13

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

    Il n'est pas si différente de celle du cas d'utilisation de "regroupement" dans les dessins graphiques tels
    comme vous le feriez dans une présentation powerpoint.

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

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

    La <g>-element n'a pas de x et y des attributs. Pour déplacer le contenu
    d'un <g>-element vous ne pouvez le faire à l'aide de l'attribut transform,
    à l'aide de la "traduire" de la fonction, comme ceci: transform="translate(x,y)".

    InformationsquelleAutor kramamurthi