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：parent的父級，並根據該節點的值設置顏色。