Javascript 如何在基于聚类的树状图中设置颜色？

我用d3树状图可视化了8个类别/簇。结果可以在下面的代码段中看到：

const width=1500，
高度=600；
常量cluster=d3.cluster（）
.尺寸（[宽度-160，高度]）；
const svg=d3.select（“body”）.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“转换”、“翻译（40,0）”）；
变量数据={
“名称”：“flare”，
“儿童”：[
{
“名称”：“股权”，
“儿童”：[
{
“名称”：“普通股权”，
“儿童”：[
{
“名称”：“普通股权”，
“儿童”：[
{“名称”：“阿伯丁标准”}，
]
},
{
“名称”：“普通股权”，
“儿童”：[
{“名称”：“伯恩斯坦联盟”}，
]
},
{
“名称”：“普通股权”，
“儿童”：[
{“名称”：“东泉”}，
]
},
{
“名称”：“普通股权”，
“儿童”：[
{“name”：“Fidelity”}，
]
},
{
“名称”：“普通股权”，
“儿童”：[
{“名称”：“Invesco”}，
]
},
{
“名称”：“普通股权”，
“儿童”：[
{“名称”：“UBS”}，
]
},
{
“名称”：“普通股权”，
“儿童”：[
{“姓名”：“富勒顿”}，
{“名称”：“富勒顿”}
]
},
{
“名称”：“普通股权”，
“儿童”：[
{“名称”：“施罗德”}，
{“名称”：“施罗德”}
]
},
{
“名称”：“普通股权”，
“儿童”：[
{“名称”：“APS”}，
{“名称”：“APS”}
]
},
{
“名称”：“普通股权”，
“儿童”：[
{“名称”：“价值伙伴”}，
{“名称”：“价值伙伴”}，
{“名称”：“价值伙伴”}，
{“名称”：“价值伙伴”}，
{“名称”：“价值伙伴”}，
{“名称”：“价值伙伴”}，
{“名称”：“价值伙伴”}，
]
}
]
},
{
“名称”：“大数据权益”，
“儿童”：[
{“名称”：“贝莱德”}，
{“名称”：“贝莱德”}，
{“名称”：“贝莱德”}
]
}
]
},
{
“名称”：“混合”，
“儿童”：[
{
“名称”：“混合”，
“儿童”：[
{“名称”：“安联”}，
]
},
{
“名称”：“混合”，
“儿童”：[
{“名称”：“幻影”}，
]
},
{
“名称”：“混合”，
“儿童”：[
{“名称”：“AZ”}，
{“名称”：“AZ”}，
{“名称”：“AZ”}，
{“名称”：“AZ”}
]
},
]
},
{
“名称”：“固定收益”，
“儿童”：[
{
“名称”：“固定收益”，
“儿童”：[
{“名称”：“阿伯丁标准”}，
]
},
{
“名称”：“固定收益”，
“儿童”：[
{“姓名”：“纽伯格伯曼”}，
{“姓名”：“纽伯格伯曼”}，
]
},
{
“名称”：“固定收益”，
“儿童”：[
{“名称”：“施罗德”}，
{“名称”：“施罗德”}，
]
},
{
“名称”：“固定收益”，
“儿童”：[
{“name”：“Fidelity”}，
{“name”：“Fidelity”}，
{“name”：“Fidelity”}，
]
},
{
“名称”：“固定收益”，
“儿童”：[
{“名称”：“UBS”}，
{“名称”：“UBS”}，
{“名称”：“UBS”}，
]
},
]
},
{
“名称”：“CTA”，
“儿童”：[
{
“名称”：“CTA”，
“儿童”：[
{“名称”：“Man投资”}，
]
},
{
“名称”：“CTA”，
“儿童”：[
{“名称”：“温顿”}，
{“名称”：“温顿”}，
{“名称”：“温顿”}，
{“名称”：“温顿”}，
{“名称”：“温顿”}，
{“名称”：“温顿”}，
]
}
]
},
{
“名称”：“数量”，
“儿童”：[
{
“名称”：“数量”，
“儿童”：[
{“名称”：“Man投资”}，
]
},
{
“名称”：“数量”，
“儿童”：[
{“name”：“DE Shaw”}，
]
},
{
“名称”：“数量”，
“儿童”：[
{“姓名”：“纽伯格伯曼”}，
{“姓名”：“纽伯格伯曼”}
]
}
]
},
{
“名称”：“FOF”，
“儿童”：[
{
“名称”：“FOF”，
“儿童”：[
{“名称”：“UBS”}，
]
},
{
“名称”：“FOF”，
“儿童”：[
{“名称”：“施罗德”}，
]
}
]
},
{
“名称”：“全天候”，
“儿童”：[
{
“名称”：“全天候”，
“儿童”：[
{“名称”：“Bridgewater”}，
]
}
]
}
]
};
常量根=d3.层次结构（数据）；
簇（根）；
//console.log（root.links（））
var colorScale=d3.scaleOrdinal（）
.范围（[“003366”、“366092”、“4f81b9”、“95b3d7”、“b8cce4”、“f6d18b”、“e4a733”、“a6a6a6”、“D9D9”、“FFFFFFCC”、“b29866”））；
var nodeG=svg.selectAll（“.node”）
.data（root.links（））
.attr（'类'，'节点'）
.输入（）
.append（'g'）；
nodeG.append（“路径”）
.attr（“类”、“链接”）
.attr（“d”，弯头）
.style（'stroke-width'，'3px'）
.style（'stroke'，function（d）{returncolorscale（d.source.data.children）}）；
/*
nodeG.append（'text'）
.attr（'x'，函数（d）{返回d.target.x}）
.attr（'y'，函数（d）{返回d.target.y}）
.text（函数（d）{返回d.target.data.name}）；
*/
功能弯头（d）{
返回“M”+d.source.x+”，“+d.source.y
+“H”+d.target.x+“V”+d.target.y；
}

.link{
填充：无；
冲程：#ccc；
笔画宽度：1；
}

---

您必须设置序数刻度的域：

var colorScale = d3.scaleOrdinal()
    .range(["#003366", "#366092", "#4f81b9", "#95b3d7", "#b8cce4", "#f6d18b", "#e4a733", "#a6a6a6", "#d9d9d9", "#ffffcc", "#b29866"])
    .domain(["vanilla equity", "big data equity", "mixed", "fixed income", "CTA", "Quant", "FOF", "All weather"]);

如果不这样做，域将根据传递给标尺的新值动态创建

另外，根据您想要的域，我想说您想要

colorScale（d.source.data.name）

，而不是

colorScale（d.source.data.children）

（顺便说一句，它是一个数组，不是一个字符串）

以下是包含这些更改的代码：

const width=1500，
高度=600；
常量cluster=d3.cluster（）
.尺寸（[宽度-160，高度]）；
const svg=d3.select（“body”）.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“转换”、“翻译（40,0）”）；