我在 d3 v3.5 中使用以下函数为子节点和链接着色,与在 scaleOrdinal() 中设置的父节点相同。
然而,虽然现在在 d3 v7 中使用 answer here 可以为子节点着色以匹配父节点,但链接没有被着色以匹配父链接。
const colourScale = d3.scaleOrdinal()
.domain( [ "Parent", "Child 1", "Child 2" ] )
.range( [ "#abacab", "#b67a4e", "#5a6fbb" ] );
...
function findParent(datum) {
if (datum.depth < 2) {
return datum.name
} else {
return findParent(datum.parent)
}
}
function findParentLinks(datum) {
if (datum.target.depth < 2) {
return datum.target.name
} else {
return findParent(datum.target.parent)
}
}
和应用:
var linkEnter = link.enter().insert('path', "g")
.attr("class", "link")
.attr("stroke-width", function(d) {
return 1;
})
.attr('d', function(d){
var o = {
x: source.x0,
y: source.y0
}
return diagonal(o, o)
})
.attr("opacity", "0.3")
.style("stroke", function(d) {
return colourScale(findParentLinks(d));
});
关于解决这个问题的任何想法?见fiddle