D3.js: ¿qué es 'g' en .append ("g") código D3.js?

129

Soy nuevo en D3.js, empecé a aprender solo hoy

Miré el ejemplo del donut y encontré este código

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

Busqué documentación , pero no entendí lo que .append("g")se adjunta

¿Es incluso D3específico?

Buscando orientación aquí

javascript d3.js soñador
fuente
55
Buenas respuestas a continuación. Posiblemente vale la pena ver el siguiente video de youtube de D3Vienno sobre la agrupación en D3. youtube.com/watch?v=SYuFy1j8SG En realidad, si está comenzando, vale la pena ver toda la serie :-).
d3noob

Respuestas:

17

Vine aquí desde una curva de aprendizaje d3 también. Como ya se señaló, esto no es específico de d3, es específico de los atributos svg. Aquí hay un tutorial realmente bueno que explica las ventajas de svg: g (agrupación).

No es tan diferente del caso de uso de "agrupación" en dibujos gráficos como los que haría en una presentación de PowerPoint.

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

Como se señaló en el enlace anterior: para traducir necesita usar translate (x, y):

El <g>-elementno tiene atributos x e y. Para mover el contenido de un <g>-elementsolo puede hacerlo usando el atributo transform, usando la función "translate", así: transform = "translate (x, y)".

kramamurthi
fuente