D3.js: co to jest „g” w kodzie D3.js .append („g”)?

129

Jestem nowy D3.js, zacząłem się uczyć dopiero dzisiaj

Spojrzałem na przykład pączka i znalazłem ten kod

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

Szukałem dokumentacji , ale nie rozumiałem, co .append("g")jest załączane

Czy to jest w ogóle D3specyficzne?

Szukasz wskazówek tutaj

javascript d3.js marzyciel
źródło
5
Dobre odpowiedzi poniżej. Ewentualnie warto obejrzeć poniższy film na youtube z D3Vienno na temat grupowania w D3. youtube.com/watch?v=SYuFy1j8SGs Właściwie, jeśli zaczynasz, warto obejrzeć całą serię :-).
d3noob

Odpowiedzi:

19

Przyszedłem tutaj również z krzywej uczenia się d3. Jak już wspomniano, nie jest to specyficzne dla d3, jest specyficzne dla atrybutów svg. Oto naprawdę dobry poradnik wyjaśniający zalety svg: g (grupowanie).

Nie różni się to zbytnio od przypadku użycia „grupowania” na rysunkach graficznych, takich jak te, które można wykonać w prezentacji PowerPoint.

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

Jak wskazano w powyższym linku: aby przetłumaczyć, musisz użyć translate (x, y):

<g>-elementNie posiada xiy atrybuty. Aby przenieść zawartość a, <g>-elementmożesz to zrobić tylko za pomocą atrybutu transform, używając funkcji "translate", na przykład: transform = "translate (x, y)".

kramamurthi
źródło