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

129

Ich bin neu in D3.js, habe erst heute angefangen zu lernen

Ich habe mir das Donut-Beispiel angesehen und diesen Code gefunden

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

Ich habe nach Dokumentation gesucht , aber nicht verstanden, was .append("g")angehängt wird

Ist es überhaupt D3spezifisch?

Hier suchen Sie nach Anleitung

javascript d3.js

— Tagträumer
quelle

5

Gute Antworten kommen unten. Möglicherweise lohnt es sich, das folgende Youtube-Video von D3Vienno über die Gruppierung in D3 anzusehen. youtube.com/watch?v=SYuFy1j8SGs Wenn Sie anfangen, ist die ganze Serie sehenswert :-).

— d3noob

116

Es wird ein 'g'-Element an die SVG angehängt . gDas Element wird verwendet, um SVG-Formen zu gruppieren. Nein, es ist nicht d3-spezifisch.

— Cihan Keser
quelle

1

Die MDN-Dokumentation für Javascript leuchtet immer auf: developer.mozilla.org/en/docs/Web/SVG/Element/g . Einen experimentellen Stift finden Sie hier: codepen.io/ahujamoh/pen/brRpWM

— Mohit

17

Ich bin auch von einer d3-Lernkurve hierher gekommen. 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 wesentlich vom Anwendungsfall der "Gruppierung" in grafischen Zeichnungen, wie Sie sie in einer PowerPoint-Präsentation ausführen würden.

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

Wie im obigen Link angegeben: Zum Übersetzen müssen Sie translate (x, y) verwenden:

Das <g>-elementhat keine x- und y-Attribute. Um den Inhalt von a zu verschieben <g>-element, können Sie dies nur mit dem transform-Attribut und der Funktion "translate" tun: transform = "translate (x, y)".

— kramamurthi
quelle