我正在尝试在 d3 v4 中实现可折叠树。我正在使用 this example并意识到,它正在使用自定义函数来创建链接形状
// Creates a curved (diagonal) path from parent to the child nodes
function diagonal(s, d) {
path = `M ${s.y} ${s.x}
C ${(s.y + d.y) / 2} ${s.x},
${(s.y + d.y) / 2} ${d.x},
${d.y} ${d.x}`
return path
}
自 d3 v 4.9 以来,有一个内置的 link generator我想知道如何在此示例中使用它。
我无法理解跟进电话
// Enter any new links at the parent's previous position.
var linkEnter = link.enter().insert('path', "g")
.attr("class", "link")
.attr('d', function(d){
var o = {x: source.x0, y: source.y0}
return diagonal(o, o)
});
....
// Remove any exiting links
var linkExit = link.exit().transition()
.duration(duration)
.attr('d', function(d) {
var o = {x: source.x, y: source.y}
return diagonal(o, o)
})
.remove();
我明白,这是在创建一条从点 (x,y) 到点 (x,y) 的曲线 - 所以基本上是从同一点到同一点?
此外,我尝试更新
// Transition back to the parent element position
linkUpdate.transition()
.duration(duration)
.attr('d', function(d){ return diagonal(d, d.parent) });
使用以下代码
<删除> //过渡回父元素位置 链接更新.transition() .duration(持续时间) .attr('d', d3.linkHorizontal(d, d.parent)) 但我得到了 *Uncaught ReferenceError: d is not defined*// Transition back to the parent element position
linkUpdate.transition()
.duration(duration)
.attr('d', d3.linkHorizontal()
.source(function (d) {return d.parent})
.target(function (d) {return d})
);
但是我在控制台中遇到了很多错误
d3.v4.min.js:2 Error: <path> attribute d: Expected number, "MNaN,NaNCNaN,NaN,…".
有人可以解释我的错误或指出一些工作代码吗?非常感谢!
最佳答案
我想我已经从我原来的答案中弄清楚了大部分的困惑。
在链接创建时创建“零长度路径”
var linkEnter = link.enter().insert('path', "g")
.attr("class", "link")
.attr('d', function(d){
var o = {x: source.x0, y: source.y0}
return diagonal(o, o)
});
关于删除链接
var linkExit = link.exit().transition()
.duration(duration)
.attr('d', function(d) {
var o = {x: source.x, y: source.y}
return diagonal(o, o)
})
.remove();
用于创建动画,当节点连同相关链接一起滑出/检索它们的父节点时。动画以动画形式将路径转换为最终形状,从/到 “空” 形状 - 因此链接在相同坐标处开始和结束。
链接生成器然后可以像这样使用
// Enter any new links at the parent's previous position.
var linkEnter = link.enter().insert('path', "g")
.attr("class", "link")
.attr('d', d3.linkHorizontal()
.source(function(){ return [sourceNode.y0, sourceNode.x0]})
.target(function(){ return [sourceNode.y0, sourceNode.x0]}));
...
// Transition back to the parent element position
linkUpdate.transition()
.duration(duration)
.attr('d', d3.linkHorizontal()
.source(function (d) {return [d.parent.y, d.parent.x]})
.target(function (d) {return [d.y, d.x]})
);
...
// Remove any exiting links
var linkExit = link.exit().transition()
.duration(duration)
.attr('d', d3.linkHorizontal()
.source(function(){ return [sourceNode.y, sourceNode.x]})
.target(function(){ return [sourceNode.y, sourceNode.x]}))
.remove();
关于javascript - 使用 d3 链接生成器的 D3 v4 可折叠树,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45641570/