javascript - 使用 d3 链接生成器的 D3 v4 可折叠树

标签 javascript d3.js svg graph tree

我正在尝试在 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.linkHorizo​​ntal(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/

相关文章:

javascript - 按属性选择 d3.js 数据元素

html - 从 URL 使用 HTML 中的 .svg 文件?

Javascript重新定义并覆盖现有函数体

javascript - 传单:如何在缩放开始之前获取 lat lng 的像素位置

javascript - 有条件地返回 JavaScript 中的对象属性

javascript - D3 : Is it possible to zoom+pan one axis and only pan the other?

javascript - 由 var 分隔的嵌套选择失败

javascript - 负值不显示在分组条形图中

javascript - 使用 webapp.connecthandlers 时 mup 部署错误

javascript - 您可以在 javascript 中使用模板文字创建对象属性名称吗?