D3.js: che cos'è 'g' nel codice D3.js .append (“g”)?

129

Sono nuovo D3.js, ho iniziato a studiare solo oggi

Ho guardato l' esempio della ciambella e ho trovato questo codice

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

Ho cercato la documentazione , ma non ho capito cosa .append("g")stava aggiungendo

È anche D3specifico?

In cerca di assistenza qui

javascript d3.js

— sognatore ad occhi aperti
fonte

5

Di seguito vengono fornite buone risposte. Vale la pena guardare il seguente video di YouTube da D3Vienno sul raggruppamento in D3. youtube.com/watch?v=SYuFy1j8SGs In realtà, se stai iniziando, vale la pena guardare l'intera serie :-).

— d3noob,

116

Aggiunge un elemento 'g' all'SVG. gL'elemento viene utilizzato per raggruppare insieme le forme SVG , quindi non è specifico per d3.

— Cihan Keser
fonte

1

La documentazione MDN per javascript illumina sempre: developer.mozilla.org/en/docs/Web/SVG/Element/g . Una penna sperimentale può essere trovata qui: codepen.io/ahujamoh/pen/brRpWM

— Mohit

17

Sono venuto qui anche da una curva di apprendimento d3. Come già sottolineato, questo non è specifico di d3, è specifico degli attributi svg. Ecco un ottimo tutorial che spiega i vantaggi di svg: g (raggruppamento).

Non è così diverso dal caso d'uso del "raggruppamento" in disegni grafici come quelli che faresti in una presentazione powerpoint.

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

Come indicato nel link sopra: per tradurre è necessario utilizzare translate (x, y):

Il <g>-elementnon ha attributi xey. Per spostare il contenuto di a <g>-elementpuoi farlo solo usando l'attributo transform, usando la funzione "translate", in questo modo: transform = "translate (x, y)".

— kramamurthi
fonte