D3.js D3圆形包装-每个分支的开关颜色

我有一个d3圆形包装，我想找到一个优雅的方式来给每个树枝涂上不同的颜色。我有一个深度属性，所以很容易基于它应用渐变。 为了给每个分支涂上不同的颜色，我认为需要知道之前的兄弟姐妹使用了什么颜色，但我不确定如何找到它。 感谢您的帮助，我不知道如何开始

谢谢

颜色由以下程序生成，该程序将根据树中的深度返回颜色：

var color = d3.scale
      .linear()
      .domain([-1, 5])
      .range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
      .interpolate(d3.interpolateHcl);

    function color_for_node(node) {
      var out;
      //some other operation removed here for simplification
      out = node.children ? color(node.depth) : null;
      return out;
    }

然后由以下人员使用（简化）：

circle=svg
.selectAll（“圆圈”）
.数据（节点）
.输入（）
.附加（“圆圈”）
.someOtherStuff（）
.style（“fill”，用于节点的颜色）//这是一个通用解决方案。由于d3集合的顺序是正确的，所以每次遇到一个根分支节点时，它后面都跟着它的子节点，直到它到达另一个根分支节点为止。因此，我们可以有效地将颜色从一个分支切换到另一个分支，而无需检查每个节点的父节点，这将是昂贵的计算

        const ranges = [
      ["hsl(120,0%,90%)", "hsl(120,0%,50%)"], //grey
      ["hsl(228,80%,80%)", "hsl(300,30%,40%)"], //light blue
      ["hsl(300,80%,80%)", "hsl(360,30%,40%)"], //light pink to brick
      ["hsl(152,80%,80%)", "hsl(228,30%,40%)"], //light green-blue
      ["hsl(80,80%,80%)", "hsl(120,30%,40%)"], //light yellow-green
      ["hsl(120,80%,80%)", "hsl(150,30%,40%)"], //light green
      ["hsl(0,80%,80%)", "hsl(40,30%,40%)"], //light pink to brown
      ["hsl(40,80%,80%)", "hsl(80,30%,40%)"] //sand
    ];
    let rangeIndex = 0;
    const color = node => {
      let range = ranges[rangeIndex];
      if (node.depth === 1) {
        rangeIndex = rangeIndex < ranges.length - 1 ? rangeIndex + 1 : 0;
        range = ranges[rangeIndex];
      }

      return d3.scale
        .linear()
        .domain([-1, 5])
        .range(range)
        .interpolate(d3.interpolateHcl)(node.depth);
    };

常数范围=[
[“hsl（120,0%，90%），“hsl（120,0%，50%）”]，//灰色
[“hsl（228,80%，80%），“hsl（300,30%，40%），//浅蓝色
[“hsl（300,80%，80%），“hsl（360,30%，40%）”]，//浅粉色至砖黄色
[“hsl（152,80%，80%），“hsl（228,30%，40%）”]，//浅绿色-蓝色
[“hsl（80,80%，80%），“hsl（120,30%，40%）”]，//浅黄绿色
[“hsl（120,80%，80%），“hsl（150,30%，40%）”]，//浅绿色
[“hsl（0,80%，80%），“hsl（40,30%，40%）”]，//浅粉色至棕色
[“hsl（40,80%，80%），“hsl（80,30%，40%）”]//沙
];
设rangeIndex=0；
const color=node=>{
让范围=范围[范围索引]；
如果（node.depth==1）{
rangeIndex=rangeIndex
有些代码会非常有用。但是你可以尝试对分支进行分类，然后使用css给它们上色。是的，对不起，我在开始时被任务弄糊涂了，因此产生了这个困惑的问题。希望我能很快自己回答这个问题。亲爱的选民们，现在有一些研究已经完成，我自己也发布了一个答案。
        const ranges = [
      ["hsl(120,0%,90%)", "hsl(120,0%,50%)"], //grey
      ["hsl(228,80%,80%)", "hsl(300,30%,40%)"], //light blue
      ["hsl(300,80%,80%)", "hsl(360,30%,40%)"], //light pink to brick
      ["hsl(152,80%,80%)", "hsl(228,30%,40%)"], //light green-blue
      ["hsl(80,80%,80%)", "hsl(120,30%,40%)"], //light yellow-green
      ["hsl(120,80%,80%)", "hsl(150,30%,40%)"], //light green
      ["hsl(0,80%,80%)", "hsl(40,30%,40%)"], //light pink to brown
      ["hsl(40,80%,80%)", "hsl(80,30%,40%)"] //sand
    ];
    let rangeIndex = 0;
    const color = node => {
      let range = ranges[rangeIndex];
      if (node.depth === 1) {
        rangeIndex = rangeIndex < ranges.length - 1 ? rangeIndex + 1 : 0;
        range = ranges[rangeIndex];
      }

      return d3.scale
        .linear()
        .domain([-1, 5])
        .range(range)
        .interpolate(d3.interpolateHcl)(node.depth);
    };