D3.js v4 сопоставление цветов с именами

Question

Я сейчас работаю над такой визуализацией:

Последовательность солнечных лучей

Во фрагменте он жестко кодирует цвета, такие как

// Mapping of step names to colors.
var colors = {
  "home": "#5687d1",
  "product": "#7b615c",
  "search": "#de783b",
  "account": "#6ab975",
  "other": "#a173d1",
  "end": "#bbbbbb"
};

Я хочу определить только цвета родителей. Цвета детей должны быть вариациями родителей с меньшей непрозрачностью. Как-то закодировано как:

var color = d3.scale.category20();

Как бы я это сделал?

Answer 1

d3.heirarchy ( https://github.com/d3/d3-hierarchy/blob/master/README.md#hierarchy) возвращает эти свойства для каждого узла:

• node.depth
• node.parent

Вы можете использовать .depth в качестве входных данных для функции, которая определяет непрозрачность заливки, например, более высокая глубина = больше непрозрачности. Вы можете использовать .parent в качестве входных данных для функции, которая выполняет итерацию до родительского элемента, у которого есть parent: null, и установить цвет на основе значения этого узла.