JS中Plotly旭日图子扇区自定义不同颜色配置方法

问题现状 #

在JavaScript环境下使用Plotly库绘制sunburst（旭日图）时，基础绘制功能运行正常，但子分区同层级节点颜色完全一致，暂未找到正确的差异化配色配置方式。

当前绘制效果：

当前效果中同属Seth子节点的「Enos」和「Noam」颜色完全一致，需要实现二者显示不同颜色、或至少具备不同透明度的效果，目标参考效果如下：

当前使用的实现代码：

var data = [{
    "type": "sunburst",
    "labels": ["Eve", "Awan", "Seth", "Enos", "Noam", "Enoch"],
    "parents": ["", "Eve", "Eve", "Seth", "Seth", "Awan"],
    "values": [100, 20, 80, 60, 20, 20]
}];
var layout = {
    sunburstcolorway: ["#636efa", "#ef553b"]
};
Plotly.newPlot('myChart', data, layout)

问题原因 #

默认配置下，Plotly旭日图的sunburstcolorway色板仅给根节点下的第一级分支分配独立颜色，子节点默认继承父节点的同色系颜色；且当前配置的色板仅传入2个色值，同分支下的子节点会直接复用父节点颜色，导致同层级子节点无颜色差异。

实现方案 #

方案1：关闭颜色继承+扩充色板 #

在layout中添加extendsunburstcolors: false配置，关闭子节点对父节点的颜色继承逻辑，同时扩充sunburstcolorway的色值数量，让所有层级节点都能从色板中取到独立颜色。
修改后可运行代码：

var data = [{
    "type": "sunburst",
    "labels": ["Eve", "Awan", "Seth", "Enos", "Noam", "Enoch"],
    "parents": ["", "Eve", "Eve", "Seth", "Seth", "Awan"],
    "values": [100, 20, 80, 60, 20, 20]
}];
var layout = {
    sunburstcolorway: ["#636efa", "#ef553b", "#00cc96", "#ab63fa", "#ffa15a", "#19d3f3"],
    extendsunburstcolors: false
};
Plotly.newPlot('myChart', data, layout)

方案2：手动指定每个节点的颜色/透明度 #

如果需要精准控制每个区块的颜色、透明度，可以在data配置项中添加marker.colors数组，按照labels数组的顺序，为每个节点单独指定色值（十六进制色值最后两位对应透明度，ff为完全不透明，00为完全透明）。
示例代码：

var data = [{
    "type": "sunburst",
    "labels": ["Eve", "Awan", "Seth", "Enos", "Noam", "Enoch"],
    "parents": ["", "Eve", "Eve", "Seth", "Seth", "Awan"],
    "values": [100, 20, 80, 60, 20, 20],
    marker: {
        colors: [
            "#636efa", // 根节点Eve
            "#ef553b", // 一级节点Awan
            "#636efa", // 一级节点Seth
            "#636efacc", // 子节点Enos，80%不透明度
            "#636efa80", // 子节点Noam，50%不透明度
            "#ef553bcc"  // 子节点Enoch，80%不透明度
        ]
    }
}];
var layout = {};
Plotly.newPlot('myChart', data, layout)

内容的提问来源于stack exchange，提问作者Daniel Olarte