Ich bin neu bei D3.jsSie hat erst heute angefangen zu lernen
Ich habe mir das angeschaut Donut-Beispiel 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 suchte Dokumentationverstand aber nicht was .append("g") anhängt
Ist es sogar D3 Spezifisch?
Suche hier nach Anleitung
Es hängt a an ‘g’-Element zum SVG. g Element wird verwendet, um SVG-Formen zu gruppierenalso nein, es ist nicht d3-spezifisch.
Die MDN-Dokumentation für Javascript klärt immer auf: developer.mozilla.org/en/docs/Web/SVG/Element/g. Einen Versuchsstift finden Sie hier: codepen.io/ahujamoh/pen/brRpWM
– Mohit
10. August 2017 um 12:14 Uhr
kramamurthi
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 des “Gruppierens” 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: 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>-elementSie können dies nur mit dem Attribut transform tun, indem Sie die Funktion “translate” wie folgt verwenden: transform=”translate(x,y)”.
Gute Antworten kommen unten herein. Möglicherweise lohnt es sich, das folgende YouTube-Video von D3Vienno über die Gruppierung in D3 anzusehen. youtube.com/watch?v=SYuFy1j8SGs Eigentlich, wenn Sie anfangen, ist die ganze Serie sehenswert :-).
– d3noob
12. Juni 2013 um 9:33 Uhr