Jaki jest odpowiednik d3.js v4.0 dla d3.scale.category10 ()?

Próbuję nauczyć się d3 za pomocą książki Interactive Web Visualization, ale wiele się zmieniło w wersji 4.0. Jedną rzeczą, której naprawdę nie mogę zrozumieć, jest to, czy istnieje odpowiednik dla d3.scale.category10 (), aby uzyskać łatwe mapowanie na kolory. Czy jest coś takiego w nowej wersji, czy też musimy skorzystać z math.random i sami coś zakodować?

d3.js

— anonygrits
źródło

Odpowiedzi:

143

Zamiast

d3.scale.category10()

posługiwać się

d3.scaleOrdinal(d3.schemeCategory10);

Utwórz taką skalę kolorów:

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

użyj w kodzie koloru takiego samego jak w V3:

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

przeczytaj tutaj

Odniesienie tutaj

działający kod tutaj

— Cyril Cherian
źródło

Dzięki! Właśnie przewijałem dokument zmian i w końcu znalazłem wyjaśnienie.

— anonygrits

Bez względu na to, do jakiej liczby podasz color(), w działającym kodzie dane wyjściowe są zawsze niebieskie i pomarańczowe - czy jest to oczekiwane zachowanie? A jeśli chcę fioletu?

— dbj44

Wydaje się, że jest to rozwiązanie tego, czego się spodziewałem:color = d3.scaleOrdinal(d3.schemeCategory10).domain(d3.range(0, 9));

— dbj44

`w twoim działającym kodzie wyjście jest zawsze niebieskie i pomarańczowe - czy to jest oczekiwane zachowanie?` Nie, to nie jest oczekiwane, jestem tutaj zielony plnkr.co/edit/2DzxaDg1SjidDkz5v2P4?p=preview

— Cyril Cherian

Prostym rozwiązaniem jest użycie następujących skal kolorów w wersji-4 d3.js:

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 to tablice różnych kolorów. Możesz więc użyć ich różnych indeksów, aby wypełnić kształt. Na przykład

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

Dla odniesienia zajrzyj tutaj: http://bl.ocks.org/emmasaunders/f4902478bcfa411c77a412c02087bed4

Mam nadzieję, że to pomoże.

— shwetabharti
źródło