D3.js: Was ist 'g' in .append ("g") D3.js code?

Ich bin neu in D3.js begann heute das Lernen nurD3.js: Was ist 'g' in .append ("g") D3.js code?

Ich sah das die donut example und fand diesen Code

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

ich für documentation gesucht, aber verstanden nicht, was .append("g") ist anhängt

Ist es sogar D3 spezifisch?

der Suche nach Führung hier

Quelle

2013-06-12 daydreamer

Gute Antworten kommen unten. Es lohnt sich, das folgende Youtube-Video von D3Vienno zum Gruppieren in D3 anzuschauen. https://www.youtube.com/watch?v=SYuFy1j8SGs Eigentlich, wenn Sie anfangen, ist die ganze Serie sehenswert :-). – d3noob

Es hat eine 'g' element zum SVG anhängt. g Element is used to group SVG shapes together, also nein, es ist nicht d3 spezifisch.

Quelle

2013-06-12 06:09:24

MDN Dokumentation für Javascript immer aufklärt: https://developer.mozilla.org/en/docs/Web/SVG/Element/g. Ein experimenteller Stift kann hier gefunden werden: https://codepen.io/ahujamoh/pen/brRpWM – ahujamoh

Das Element wird zum Gruppieren von SVG-Formen verwendet. Sobald Sie gruppiert sind, können Sie die gesamte Gruppe von Formen so transformieren, als wäre es eine einzelne Form. Die Möglichkeit, alle Formen innerhalb eines Elements zu transformieren, ist ein Vorteil gegenüber dem Gruppieren von Formen in einem verschachtelten Element. - Elemente können nicht von selbst transformiert werden. Sie müssen das Element in ein Element verschachteln, um seine verschachtelten Formen zu transformieren.

Quelle

2013-06-12 06:16:36 ajjain

Hallo @ajjain, danke für die Info. FYI, ich denke, es ist hier eine Politik, kopierten Inhalt der ursprünglichen Quelle zuzuordnen (z. B. Jenkovs svg/g-Artikel: http://tutorials.jenkov.com/svg/g-element.html). – Astravagrant

Ich kam auch hier von einer Lernkurve d3. Wie bereits erwähnt, ist dies nicht spezifisch für d3, sondern spezifisch für SVG-Attribute. Hier ist ein wirklich gutes Tutorial, das die Vorteile von svg: g (Gruppierung) erklärt.

Es unterscheidet sich nicht von dem Anwendungsfall der "Gruppierung" in grafischen Zeichnungen wie , die Sie in einer Powerpoint-Präsentation tun würden.

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

die oben Link zeigt:

Die -elementigen nicht x und y Attribute hat: Sie (x, y) übersetzen verwenden müssen, um zu übersetzen. Um den Inhalt eines -elements zu verschieben, können Sie dies nur mit dem Transformationsattribut mit der Funktion "translate" tun, so: transform = "translate (x, y)".

Quelle

2013-07-31 20:31:57 kramamurthi

D3.js: Was ist 'g' in .append ("g") D3.js code?

Antwort

Verwandte Themen