javascript - D3.js: ce este 'g' în codul D3.js .append("g")?

Sunt nou în D3.js, am început să învăț doar astăzi

Am privit exemplul cu gogoasa și am găsit acest cod

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

Am căutat documentație, dar nu am înțeles ce adaugă .append("g")

Este chiar specific D3?

Caut îndrumare aici

Răspuns #1

Adaugă un element 'g' în SVG. Elementul g este folosit pentru a grupa forme SVG împreună, deci nu, nu este specific d3.

Răspunsul #2

Am venit aici tot de la o curbă de învățare d3. Așa cum s-a menționat deja, acest lucru nu este specific d3, este specific atributelor svg. Iată un tutorial foarte bun care explică avantajele svg:g (gruparea).

Nu este atât de diferit de cazul de utilizare al „grupării” în desene grafice, cum ar fi cele pe care le-ai face într-o prezentare PowerPoint.

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

Așa cum s-a menționat în linkul de mai sus: pentru a traduce trebuie să folosești translate(x,y):

Elementul <g> nu are atribute x și y. Pentru a muta conținutul unui <g> element, poți face acest lucru folosind doar atributul transform, utilizând funcția „translate”, astfel: transform="translate(x,y)".