D3.js v4颜色到名称映射

Question

我正在研究像这样的可视化：

Sunburst Sequence

在片段中，他正在硬编码像

这样的颜色

// 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的父级，并根据该节点的值设置颜色。