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

Jestem nowy D3.js, rozpoczął naukę tylko dzisiajD3.js: co to jest "g" w kodzie .append ("g") D3.js?

I wyglądał The donut example i znaleźć 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 documentation, ale nie rozumie, co .append("g") jest dołączanie

Czy nawet specyficzne dla D3?

Szukasz wskazówek tutaj

Źródło

2013-06-12 daydreamer

Dobre odpowiedzi nadchodzą poniżej. Możliwe, że warto sprawdzić poniższy film z youtube z D3Vienno na temat grupowania w D3. https://www.youtube.com/watch?v=SYuFy1j8SGs Właściwie, jeśli dopiero zaczynasz, warto obejrzeć całą serię :-). – d3noob

dołącza on 'g' element do formatu SVG. g element is used to group SVG shapes together, więc nie jest to specyficzne dla d3.

Źródło

2013-06-12 06:09:24

Dokumentacja MDN dla javascript zawsze oświeca: https://developer.mozilla.org/en/docs/Web/SVG/Element/g. Eksperymentalne pióro można znaleźć tutaj: https://codepen.io/ahujamoh/pen/brRpWM – ahujamoh

Element służy do grupowania kształtów SVG. Po zgrupowaniu możesz przekształcić całą grupę kształtów tak, jakby był to pojedynczy kształt. Możliwość przekształcania wszystkich kształtów w obrębie -elementu jest zaletą w porównaniu do grupowania kształtów w zagnieżdżonym elemencie. -elementy nie mogą być przekształcane samodzielnie. Będziesz musiał zagnieździć element -element w obrębie -elementu, aby przekształcić jego zagnieżdżone kształty.

Źródło

2013-06-12 06:16:36 ajjain

Hi @ajjain, dzięki za informacje. FYI, wydaje mi się, że zasadą jest tutaj przypisanie każdej skopiowanej treści do oryginalnego źródła (np. Artykuł svg/g Jenkova: http://tutorials.jenkov.com/svg/g-element.html). – Astravagrant

Przybyłem tu także z krzywej uczenia się d3. Jak już wspomniano, nie jest to specyficzne dla d3, jest specyficzne dla atrybutów svg. Oto naprawdę dobry samouczek wyjaśniający zalety svg: g (grupowanie).

Nie różni się to od przypadku użycia "grupowania" rysunków graficznych, takich jak , jak w przypadku prezentacji PowerPoint.

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

Jak wskazano w powyższym linku: tłumaczyć trzeba użyć tłumaczyć (x, y):

-elementowe nie posiada atrybuty x i y. Aby przenieść zawartość elementu -element, można to zrobić tylko za pomocą atrybutu transformacji, , używając funkcji "translate", na przykład: transform = "translate (x, y)".

Źródło

2013-07-31 20:31:57 kramamurthi

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

Odpowiedz

Powiązane problemy