d3.js - d3js 集群布局树状图节点链接到自定义深度

Question

我正在尝试使用 d3js 开发具有自定义节点深度的折叠集群树状图。我可以让节点出现在我希望它们出现的位置，但是使用对角线绘制的节点之间的链接不会到达正确的位置。

如果我没有在第 66 行给它们一个自定义深度（日期），链接将指向节点所在的位置。日期只是 json 中的一个数字属性，用于表示我想要节点从顶部开始的像素数。

.attr("transform", function(d) { return "translate(" + d.x + "," + d.date + ")"; });

当我尝试修改第 92 和 93 行时，我在控制台中收到类似这样的错误：“Problem parsing d="M0,C0,NaN 0,NaN 0,""

    var o = {x: source.x0, y: source.y};
    return diagonal({source: o, target: o});

我避免使用树布局以避免 d3 使用的整洁树自动布局，但这是从树布局移植过来的，所以也许我没有做对。知道我做错了什么吗？

score 0 · Accepted Answer

您正在使用该.date属性来确定y节点的位置，因此您需要执行相同的操作来确定链接的起点/终点。您可以修改对角线的投影以也使用.date（如果存在）来确定y位置：

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.x, d.date ? +d.date : d.y]; });

d3.js - d3js 集群布局树状图节​​点链接到自定义深度