it-swarm.com.de

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

Ich bin neu bei D3.js Und habe erst heute angefangen zu lernen

Ich sah das Donut-Beispiel 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 habe nach Dokumentation gesucht, aber nicht verstanden, was .append("g") anhängt

Ist es sogar D3 Spezifisch?

Hier nach Anleitung suchen

118
daydreamer

Es hängt ein 'g' Element an die SVG an. g Element wird zum Gruppieren von SVG-Formen verwendet , also nein, es ist nicht d3-spezifisch.

107
Cihan Keser

Ich bin auch von einer d3-Lernkurve hergekommen. 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 so sehr von dem Anwendungsfall der "Gruppierung" in grafischen Zeichnungen, wie Sie es in einer PowerPoint-Präsentation tun würden.

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

Wie im obigen Link gezeigt: Um zu übersetzen, müssen Sie translate (x, y) verwenden:

Das <g>-element hat keine x- und y-Attribute. So verschieben Sie den Inhalt eines <g>-element Sie können dies nur mit dem transform-Attribut tun, indem Sie die "translate" -Funktion wie folgt verwenden: transform = "translate (x, y)".

13
kramamurthi