Was entspricht d3.js v4.0 für d3.scale.category10 ()?

Ich versuche, d3 mit dem Buch Interactive Web Visualization zu lernen, aber mit Version 4.0 hat sich viel geändert. Eine Sache, die ich wirklich nicht herausfinden kann, ist, ob es ein Äquivalent für d3.scale.category10 () gibt, um eine einfache Zuordnung zu Farben zu erhalten. Gibt es so etwas in der neuen Version oder müssen wir math.random verwenden und selbst etwas codieren?

d3.js

— anonygrits
quelle

Antworten:

143

Anstatt

d3.scale.category10()

verwenden

d3.scaleOrdinal(d3.schemeCategory10);

Erstellen Sie eine Farbskala wie folgt:

var color = d3.scaleOrdinal(d3.schemeCategory10);

Verwenden Sie die gleiche Farbe im Code wie in V3:

svg.append("rect")
.attr("x", 10)
.attr("y", 10)
.attr("width", 100)
.attr("height", 100)
.style("fill", color(3))

Lesen Sie hier

Referenz hier

Arbeitscode hier

— Cyril Cherian
quelle

Vielen Dank! Ich habe gerade durch das Änderungsdokument gescrollt und schließlich die Erklärung gefunden.

— Anonygrits

Unabhängig von der Nummer, die Sie color()in Ihrem Arbeitscode angeben, ist die Ausgabe immer blau und orange - ist das das erwartete Verhalten? Was ist, wenn ich lila will?

— dbj44

Dies scheint eine Lösung für das zu sein, was ich erwartet hatte:color = d3.scaleOrdinal(d3.schemeCategory10).domain(d3.range(0, 9));

— dbj44

`In Ihrem Arbeitscode ist die Ausgabe immer blau und orange - ist das das erwartete Verhalten?` Nein, das ist nicht zu erwarten. Ich werde hier grün. plnkr.co/edit/2DzxaDg1SjidDkz5v2P4?p=preview

— Cyril Cherian

Eine einfache Lösung besteht darin, die folgenden Farbskalen in Version 4 von d3.js zu verwenden:

var colorScale_1 = d3.schemeCategory10;
var colorScale_2 = schemeCategory20;
var colorScale_3 = d3.schemeCategory20b;
var colorScale_4 = d3.schemeCategory20c;

colorScale_1, colorScale_2, colorScale_3, colorScale_4 sind die Arrays verschiedener Farben. Sie können also die verschiedenen Indizes verwenden, um die Form zu füllen. Zum Beispiel

svg.append("rect")
.attr("x", 10)
.attr("y", 10)
.attr("width", 100)
.attr("height", 100)
.style("fill", colorScale_1[2])

Als Referenz finden Sie hier: http://bl.ocks.org/emmasaunders/f4902478bcfa411c77a412c02087bed4

Hoffentlich hilft das.

— Shwetabharti
quelle