Javascript D3.js v4颜色到名称映射

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

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

// 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();

如何执行此操作？

d3.heirarch为每个节点返回以下属性：

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