颜色后代节点和链接在移动到 d3 v5 后断开

Question

我在 d3.js v3 的树中对十进节点和链接进行了着色。

小提琴

迁移到 v5 后，这已经中断，不知道为什么。

小提琴

V5 代码：

var colourScale = d3.scaleOrdinal()
.domain(["MD", "Year 1", "Year 2", "Year 3", "Year 4"])
.range(["#abacab", "#53e28c", "#4b80fa", "#eab014", "#bd57fe"]);

和

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)
}
}

和

// Update the node attributes and style
nodeUpdate.select('circle.node')
.attr('r', 7)
.attr("fill-opacity", "0.7")
.attr("stroke-opacity", "1")
.style("fill", function(d) {
if (d.class === "found") {
return "#ff4136"; //red
} else {
return (typeof d._children !== 'undefined') ? (colourScale(findParent(d))) : '#FFF';
}
})
.style("stroke", function(d) {
if (d.class === "found") {
return "#ff4136"; //red
} else {
return colourScale(findParent(d));
}
});

。

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({
source: o,
target: o
});
})
.attr("opacity", "0.3")
.style("stroke", function(d) {
return colourScale(findParentLinks(d));
});
...

Answer 1

在 D3 v5 中，您要查找的属性 (name( 位于一个名为data的对象中，该对象由层次结构生成器自动创建。

因此，它应该是：

function findParent(datum) {
if (datum.depth < 2) {
return datum.data.name
} else {
return findParent(datum.parent)
}
}

以下是更新的 JSFiddle：https://jsfiddle.net/5uc2g9sw/