Question

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

在上面的示例中，我对CSS过渡动画做了一些小的更改。以下是对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可折叠树节点和链接

1 个答案: