Question

在D3中，我有一个树形图布局，并且在大多数情况下都可以使用。但是，我正在经历一些奇怪的过渡/动画。发生的事情是，如果我将树扩展为显示孙子孙，则链接动画非常奇怪。 看起来它正在交换另一个链接，而不仅仅是从父节点派生出来。此外，该链接看起来好像不在屏幕上显示，而不仅仅是从父级中产生。

我在这里主要按照演示进行操作：https://bl.ocks.org/d3noob/80c100e35817395e88918627eeeac717

这是我用于链接及其过渡和对角线的代码。我

注意：我正在使用D3 v4。

let link = g.selectAll('path.link')
    .data(links);
let linkEnter = link.enter().insert('path', "g")
    .attr("class", "link")
    .attr('id', function (d) {
        return 'link' + d.id;
    })
    .attr("fill", "none")
    .attr('d', function (d) {
        let o = {
            x: source.x0,
            y: source.y0
        }
        return diagonal(o, o)
    });

let linkUpdate = linkEnter.merge(link);
linkUpdate.transition()
.duration(duration)
.attr("class", "link")
.attr('id', function (d) {
    return 'link' + d.id;
})
.attr("fill", "none")
.attr('d', function (d) {
    return diagonal(d, d.parent)
});


let linkExit = link.exit().transition()
    .duration(duration)
    .attr("class", "link")
    .attr("fill", "none")
    .attr("stroke", "transparent")
    .attr('d', function (d) {
        let o = {
            y: source.y0,
            x: source.x0
        }
        return diagonal(o, o)

    })
    .remove();

nodes.forEach(function (d, i) {
    d.x0 = d.x;
    d.y0 = d.y;
});


function diagonal(s, d) {
path = `M ${s.x} ${s.y}
      C ${(s.x + d.x) / 2} ${s.y},
        ${(s.x + d.x) / 2} ${d.y},
        ${d.x} ${d.y}`
    return path;
}

上面的代码处理进入，更新和退出时的链接。我不确定是什么问题。这就是树形布局与链接动画一起工作的方式吗？

谢谢

带链接的奇怪动画

0 个答案: