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

118

Dołącza element „g” do pliku SVG. gelement służy do grupowania kształtów SVG , więc nie, nie jest specyficzny dla d3.

— Cihan Keser
źródło

1

Dokumentacja MDN dotycząca javascript zawsze się świeci: developer.mozilla.org/en/docs/Web/SVG/Element/g . Eksperymentalny długopis można znaleźć tutaj: codepen.io/ahujamoh/pen/brRpWM

— Mohit

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