动画和控制 D3JS 可折叠树节点和链接

Question

对此处给出的解决方案的补充 -> is it possible to draw dashed links only for child to child nodes of tree layout in d3 js

在上面的例子中，我在 CSS 中对 Transition 动画做了一些小改动。 CSS 的更改如下，

.link_dashed {
    fill: none;
    stroke: #ff0000;
    stroke-width: 1.5px;
    stroke-dasharray: 20,10,5,5,5,10;
    animation: dash 5s linear;
    animation-iteration-count: infinite;
    animation-direction: reverse;
}

@keyframes dash {
    to {
        stroke-dashoffset: 250;
    }
}

它为破折号设置动画，并将移动显示为前进或后退的路径。给出的示例演示 here。但是我需要能够控制哪些虚线移动？我需要能够控制哪些虚线在节点之间移动以及不同节点之间的连接，以便我可以控制那里的动画。我查看了下面代码中的 d，

var link = svg.selectAll(".link")
        .data(links)
       .enter()
        .append("path")
        .attr("class", function (d) { return (d.source != root) ? "link_dashed" : "link_continuous" ; })
        .attr("d", diagonal);

但我不确定是否需要控制源或目标，以及是否可以为每个源附加样式？如何只控制单个节点及其连接？

Answer 1

我刚刚对自己的代码库进行了一些更改。事实证明，我的猜测是正确的。不确定它是否可以更细粒度，但此示例在更高级别上控制整个节点。下面给出的代码更改，

var link = svg.selectAll(".link")
        .data(links)
        .enter()
        .append("path")
        .attr("class", function (d) { return (d.source != root && d.source.children[0].name != 'AgglomerativeCluster') ? "link_dashed" : "link_continuous" ; })
        .attr("d", diagonal);

动画和控制 D3JS 可折叠树节点和链接

Animating and Controlling D3JS Collapsible Tree nodes and links

javascript

tree

nodes

d3.js

stroke-dasharray