D3.js v4 颜色到名称映射

Question

我现在正在做这样的可视化：

在代码片段中，他将颜色硬编码为

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

我只想定义 parents 的颜色。儿童颜色应该是 parents 的变体，不透明度较低。不知何故编码如下：

var color = d3.scale.category20();

我该怎么做？

Answer 1

d3.heirarchy (https://github.com/d3/d3-hierarchy/blob/master/README.md#hierarchy) returns 每个节点的这些属性：

node.depth
node.parent

您可以使用 .depth 作为确定填充不透明度的函数的输入，例如，更高的深度 = 更多的不透明度。您可以使用 .parent 作为函数的输入，该函数迭代到具有 parent: null 的父节点，并根据该节点的值设置颜色。

D3.js v4 颜色到名称映射

D3.js v4 colors to names mapping

javascript

d3.js

sunburst-diagram