Как настроить цветовую гамму в линейке D3?

Как изменить цвет линий в d3 линейный график, например, в Mike Босток мульти-серии D3 линейный график.

В своей примерной диаграмме Майк Босток использует D3 встроенную цветовую шкалу категории "10" в соответствии с этой строкой кода:

var color = d3.scale.category10();

Но предположим, что вместо встроенной шкалы мы хотели, чтобы линия для Остина была синей, линия для Нью-Йорка была красной, а линия для Сан-Франциско была зеленой. Должно быть достаточно просто, не так ли? Просто определите пользовательскую цветовую шкалу:

var color = d3.scale.ordinal()
    .domain(["New York", "San Francisco", "Austin"])
    .range("#FF0000", "#009933" , "#0000FF");

Я думал, что это может сделать трюк, но он превращает всю серию в черный цвет. Я пробовал стилизацию CSS каждой серии, добавляя к ним классы, но это не сработало.

Ответ 1

Вам не хватает квадратных скобок вокруг значений в .range() - в качестве аргумента требуется массив. Таким образом, код должен быть

var color = d3.scaleOrdinal() // D3 Version 4
  .domain(["New York", "San Francisco", "Austin"])
  .range(["#FF0000", "#009933" , "#0000FF"]);

Полный пример здесь.

Ответ 2

для D3 v4

   let color = d3.scaleOrdinal()
      .domain(["New York", "San Francisco", "Austin"])
      .range(["#FF0000", "#009933" , "#0000FF"]);