Что такое эквивалент d3.js v4.0 для d3.scale.category10 ()?

82

Я пытаюсь изучить d3 с помощью книги «Интерактивная веб-визуализация», но в версии 4.0 многое изменилось. Одна вещь, которую я действительно не могу понять, - есть ли эквивалент для d3.scale.category10 (), чтобы получить простое сопоставление с цветами. Есть ли что-то подобное в новой версии или нам нужно использовать math.random и самостоятельно что-то кодировать?

d3.js анонигриты
источник

Ответы:

143

Вместо 

d3.scale.category10()

использовать 

d3.scaleOrdinal(d3.schemeCategory10);

Создайте такую ​​цветовую шкалу:

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

используйте такой же цвет в коде, как в V3:

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

читать здесь

Ссылка здесь

рабочий код здесь

Сирил Чериан
источник
1
Благодаря! Я просто просматривал документ об изменениях и наконец нашел объяснение.
anonygrits
Независимо от того, какой номер вы укажете color(), в вашем рабочем коде вывод всегда будет синим и оранжевым - это ожидаемое поведение? Что, если я хочу фиолетовый?
dbj44 04
2
Кажется, это решение того, чего я ожидал:color = d3.scaleOrdinal(d3.schemeCategory10).domain(d3.range(0, 9));
dbj44 04
`в вашем рабочем коде вывод всегда синий и оранжевый - это ожидаемое поведение?` Нет, этого не ожидалось, я становлюсь зеленым здесь plnkr.co/edit/2DzxaDg1SjidDkz5v2P4?p=preview
Cyril Cherian
3

Простое решение - использовать следующие цветовые шкалы в версии 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 - это массивы разных цветов. Итак, вы можете использовать их разные индексы для заполнения фигуры. Например

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

Для справки смотрите здесь: http://bl.ocks.org/emmasaunders/f4902478bcfa411c77a412c02087bed4

Надеюсь, это поможет.

Shwetabharti
источник