Animating and Controlling D3JS Collapsible Tree nodes and links

Question

Additions to the solution given here -> is it possible to draw dashed links only for child to child nodes of tree layout in d3 js

In the above example, I made some small changes in the CSS for Transition animation. Changes to CSS given below,

.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;
    }
}

which animates the dashes and shows a movement in as a path forward or backwards. Example Demo given here. However I need to be able to control which dashed lines move? I need to be able to control which dashed lines move between the nodes and the connections between different nodes so that I can control there animations. I looked through the d in the below code,

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

but I am not sure if I need to control the source or the destination and if I can attach a style to it per source? How can I control just a single node and its connections?

Answer 1

I have just made some changes to my own codebase. It turned out that my guess was correct. Not sure if it can be even further fine grained but this example controls the whole node on a higher level. code change given below,

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