d3.js
Die wichtigsten SVG-Konzepte, die in der D3.js-Visualisierung verwendet werden

Koordinatensystem

In einem normalen mathematischen Koordinatensystem befindet sich der Punkt x = 0, y = 0 in der linken unteren Ecke des Diagramms. Im SVG-Koordinatensystem befindet sich dieser (0,0) Punkt jedoch in der oberen linken Ecke der 'Zeichenfläche'. Er ähnelt CSS, wenn Sie die Position als absolut / fix angeben und die Position mithilfe von oben und links steuern genauer Punkt des Elements.

Es ist wichtig zu wissen, dass sich die Formen mit zunehmendem SVG-Wert nach unten bewegen.

Nehmen wir an, wir werden ein Streudiagramm erstellen, wobei jeder Punkt dem Achsenwert und dem y-Wert entspricht. Um den Wert zu skalieren, müssen wir die Domäne und den Bereich folgendermaßen einstellen:

d3.svg.scale()
  .range([0, height])
  .domain([0,max])

Wenn Sie jedoch nur die Einstellungen beibehalten, basieren die Punkte auf der oberen horizontalen Kante und nicht auf der unteren horizontalen Linie wie erwartet.

Das Schöne an d3 ist, dass Sie dies leicht durch eine einfache Anpassung der Domain-Einstellungen ändern können:

d3.scale.linear()
  .range([height, 0])
  .domain([0, max])

Mit obigem Code entspricht der Nullpunkt der Domäne der Höhe des SVG, der in den Augen des Betrachters die unterste Linie des Diagramms ist, während der Maximalwert der Quelldaten dem Nullpunkt des SVG entspricht Koordinatensystem, das den maximalen Wert für Zuschauer.

Das Element

<rect> für ein Rechteck. Abgesehen von den ästhetischen Eigenschaften wie Strich und Füllung muss das Rechteck nach Ort und Größe definiert werden.

Der Ort wird durch die Attribute x und y bestimmt. Die Position ist relativ zum übergeordneten Rechteck des Rechtecks. Wenn Sie das x- oder y-Attribut nicht angeben, ist der Standardwert 0 relativ zum übergeordneten Element.

Nachdem Sie den Ort bzw. den "Startpunkt" des Rect festgelegt haben, müssen Sie als Nächstes die Größe angeben. Dies ist wichtig, wenn Sie etw auf der Leinwand zeichnen möchten, d. H., Wenn Sie dies nicht tun Geben Sie die Größenattribute an, oder der Wert ist auf 0 gesetzt. Auf der Leinwand wird nichts angezeigt.

Fall: Balkendiagramm

Fahren Sie mit dem ersten Szenario fort, den Y-Achsen. Versuchen Sie diesmal jedoch, ein Balkendiagramm zu zeichnen.

Wenn man davon ausgeht, dass die y-Skaleneinstellung gleich ist, ist auch die y-Achse richtig gesetzt. Der einzige Unterschied zwischen dem Streudiagramm und diesem Balkendiagramm besteht darin, dass wir die Breite und Höhe angeben müssen, insbesondere die Höhe. Genauer gesagt, wir haben bereits den "Ausgangspunkt", der Rest besteht darin, Dinge wie für die Höhe zu verwenden:

.attr("height", function(d){
  return (height - yScale(d.value))
})

Das

<svg> -Element ist das Stammelement oder die Leinwand, wenn wir Diagramme darauf zeichnen.

SVG-Elemente können ineinander geschachtelt werden. Auf diese Weise können SVG-Formen in Gruppen zusammengefasst werden. Gleichzeitig werden alle in einem Element verschachtelten Formen relativ zu dem umgebenden Element positioniert.

Eine Sache, die wir vielleicht erwähnen müssen, ist, dass wir nicht in einem anderen nisten können, es funktioniert nicht.

Fall: Mehrere Diagramme

Beispielsweise besteht dieses Mehrfach-Donuts- Diagramm aus mehreren Elementen, die jeweils ein Donut-Diagramm enthalten. Dies kann durch die Verwendung des Elements erreicht werden. In diesem Fall ist es jedoch zweckmäßiger, Donut-Diagramme nacheinander nebeneinander zu platzieren.

Dabei ist zu beachten, dass wir das Attribut transform nicht verwenden können, aber x, y als Position verwenden können.

Das Element

SVG unterstützt derzeit keine automatischen Zeilenumbrüche oder Zeilenumbrüche, das ist die Rettung. Das Element positioniert neue Textzeilen in Bezug auf die vorherige Textzeile. Durch die Verwendung von dx oder dy in jedem dieser Bereiche können wir das Wort in Bezug auf das Wort davor positionieren.

Fall: Anmerkung zu den Achsen

Wenn wir zum Beispiel eine Anmerkung zu y Ax hinzufügen wollen:

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Temperature (ºF)");

Ein SVG-Element korrekt anhängen

Dies ist ein relativ häufiger Fehler: Sie haben beispielsweise ein rect Element in einem Balkendiagramm erstellt und möchten eine rect hinzufügen (beispielsweise den Wert dieses Balkens). Also, die gleiche Variable , die Sie verwendet , um die anhängen rect und definieren seine x und y Position, fügen Sie Ihren text - Element. Sehr logisch, denkst du vielleicht. Das wird aber nicht funktionieren.

Wie tritt dieser Fehler auf?

Sehen wir uns ein konkretes Beispiel an, einen sehr einfachen Code zum Erstellen eines Balkendiagramms ( hier klicken ):

var data = [210, 36, 322, 59, 123, 350, 290];

var width = 400, height = 300;

var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

var bars = svg.selectAll(".myBars")
    .data(data)
    .enter()
    .append("rect");

bars.attr("x", 10)
    .attr("y", function(d,i){ return 10 + i*40})
    .attr("width", function(d){ return d})
    .attr("height", 30);

Was uns zu diesem Ergebnis führt:

Sie möchten jedoch einige Textelemente hinzufügen, vielleicht einen einfachen Wert für jeden Balken. Also machst du das:

bars.append("text")
   .attr("x", 10)
   .attr("y", function(d,i){ return 10 + i*40})
   .text(function(d){ return d});

Und voilà: nichts passiert! Wenn Sie daran zweifeln, ist hier die Geige .

"Aber ich sehe den Tag!"

Wenn Sie sich die SVG ansehen, die mit diesem letzten Code erstellt wurde, sehen Sie Folgendes:

Und an diesem Punkt sagen viele Leute: "Aber ich sehe den Text-Tag, der angehängt ist!". Ja, aber das heißt nicht, dass es funktionieren wird. Sie können alles anhängen! Sehen Sie dies zum Beispiel:

svg.append("crazyTag");

Es wird Ihnen dieses Ergebnis geben:

<svg>
    <crazyTag></crazyTag>
</svg>

Aber Sie erwarten kein Ergebnis, nur weil der Tag da ist, oder?

SVG-Elemente richtig anhängen

Erfahren Sie, welche SVG-Elemente Kinder aufnehmen können, indem Sie die Spezifikationen lesen. In unserem letzten Beispiel funktioniert der Code nicht, da rect Elemente keine text enthalten können. Wie können wir unsere Texte anzeigen?

Erstellen Sie eine weitere Variable und hängen Sie den text an die SVG-Datei an:

var texts = svg.selectAll(".myTexts")
    .data(data)
    .enter()
    .append("text");

texts.attr("x", function(d){ return d + 16})
    .attr("y", function(d,i){ return 30 + i*40})
    .text(function(d){ return d});

Und das ist das Ergebnis:

Und hier ist die Geige .

SVG: die Zeichnungsreihenfolge

Dies kann etwas frustrierend sein: Sie machen eine Visualisierung mit D3.js, aber das Rechteck, das Sie oben möchten, ist hinter einem anderen Rechteck verborgen, oder die Linie, die Sie hinter einem Kreis geplant haben, ist darüber. Sie versuchen dies mit dem Z-Index in Ihrem CSS zu lösen, aber es funktioniert nicht (in SVG 1.1).

Die Erklärung ist einfach: In einem SVG legt die Reihenfolge der Elemente die Reihenfolge des "Gemäldes" fest, und die Reihenfolge des Gemäldes bestimmt, wer oben steht.

Elemente in einem SVG-Dokumentfragment haben eine implizite Zeichenreihenfolge, wobei die ersten Elemente im SVG-Dokumentfragment zuerst "gemalt" werden. Nachfolgende Elemente werden auf zuvor gemalte Elemente gemalt.

Nehmen wir an, wir haben diese SVG:

<svg width="400" height=200>
    <circle cy="100" cx="80" r="60" fill="blue"></circle>
    <circle cy="100" cx="160" r="60" fill="yellow"></circle>
    <circle cy="100" cx="240" r="60" fill="red"></circle>
    <circle cy="100" cx="320" r="60" fill="green" z-index="-1"></circle>
</svg>

Er hat vier Kreise. Der blaue Kreis ist der erste, der "gemalt" ist, daher wird er unter allen anderen angezeigt. Dann haben wir die Gelbe, dann die Rote und schließlich die Grüne. Der grüne ist der letzte und wird oben sein.

So sieht es aus:

Ändern der Reihenfolge der SVG-Elemente mit D3

Kann man also die Reihenfolge der Elemente ändern? Kann ich den roten Kreis vor dem grünen Kreis machen?

Ja. Der erste Ansatz, den Sie berücksichtigen müssen, ist die Reihenfolge der Zeilen in Ihrem Code: Zeichnen Sie zuerst die Elemente des Hintergrunds und später im Code die Elemente des Vordergrunds.

Aber wir können die Reihenfolge der Elemente auch nach dem Bemalen dynamisch ändern. Es gibt mehrere einfache JavaScript-Funktionen, die Sie schreiben können, um dies zu tun, aber D3 hat bereits zwei nette Features, selection.raise() und selection.lower() .

Gemäß der API:

selection.raise (): Fügt jedes ausgewählte Element der Reihe nach als letztes untergeordnetes Element des übergeordneten Elements ein. selection.lower (): Fügt jedes ausgewählte Element der Reihe nach als erstes untergeordnetes Element des übergeordneten Elements ein.

Um zu zeigen, wie Sie die Reihenfolge der Elemente in unserer vorherigen SVG-Datei ändern können, haben wir hier einen sehr kleinen Code:

d3.selectAll("circle").on("mouseover", function(){
    d3.select(this).raise(); 
});

Was tut es? Es wählt alle Kreise aus, und wenn der Benutzer über einen Kreis fährt, wählt er diesen Kreis aus und bringt ihn nach vorne. Sehr einfach!

Und hier ist das JSFiddle mit dem Live-Code.