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

Question

我正在尝试使用d3js来开发具有节点自定义深度的折叠聚类树形图。我可以让节点出现在我喜欢的位置，但使用对角线在节点之间绘制的链接不会出现在正确的位置。

如果我没有在第66行给出自定义深度（日期），链接将转到节点所在的位置。日期只是json中的一个数字属性，我想从顶部有多少像素节点。

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

当我尝试修改第92行和第93行时，我在控制台中收到如下错误：“解析d =”M0，C0，NaN 0，NaN 0，“”

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

我避免使用树形布局以避免d3使用的整洁树自动布局，但是这是从树布局移植的，所以也许我没有做到这一点。知道我做错了吗？

以下是示例的小提琴：http://jsfiddle.net/lucastimmons/RQLh9/2/

Answer 1

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

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