d3.js 使用d3链接生成器的D3 v4可折叠树

wydwbb8l 于 2022-11-12 发布在其他

关注(0)|答案(2)|浏览(231)

我正在尝试在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 有一个内置的链接生成器，我想知道它如何在这个例子中使用。
我无法理解以下呼叫

// 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) });

使用以下代码
//转换回父元素位置linkUpdate.transition（）.duration（duration）.attr（'d'，d3.linkHorizontal（d，d.parent）），但我得到了 * 未捕获的引用错误：d未定义 *

// 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,…".

有人能解释我的错误或给我一些工作代码吗？非常感谢！

d3.js

来源：https://stackoverflow.com/questions/45641570/d3-v4-collapsible-tree-using-the-d3-link-generator

2条答案

按热度按时间

mi7gmzs61#

我想我从最初的答案中弄清楚了大部分的困惑。
在创建链接时创建 “零长度路径”

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();

用于创建动画，当节点连同相关链接滑出/检索回其父节点时。动画动画显示路径从最终形状到 “null” 形状的转换，因此链接在相同的坐标开始和结束。

链接生成器可按如下方式使用

// 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();

赞(0）回复(0）举报 2022-11-12

uplii1fm2#

我知道这已经太晚了，但这里有一个很好的例子，如何动画路径https://observablehq.com/@onoratod/animate-a-path-in-d3。只是建立一个路径，然后动画。

const linkGen = d3.linkHorizontal();
    const paths = linksData.map(d => {
                        return { path: linkGen({target:...,source:...}), color: d.color }
                    })
 paths.map(path => {
                    var path = svg.append("path")
                        .attr("d", path.path)
                        .attr("fill", "none")
                        .attr("stroke-width", 2)
                        .attr("stroke", path.color);

                    const length = path.node().getTotalLength();

                    // This function will animate the path over and over again
                    // Animate the path by setting the initial offset and dasharray and then transition the offset to 0
                    path.attr("stroke-dasharray", length + " " + length)
                        .attr("stroke-dashoffset", length)
                        .transition()
                        .ease(d3.easeLinear)
                        .attr("stroke-dashoffset", 0)
                        .duration(3000)
                })

赞(0）回复(0）举报 2022-11-12

我来回答

d3.js 使用d3链接生成器的D3 v4可折叠树

2条答案

相关问题

热门标签

最新问答