0

对此处给出的解决方案的补充 - >是否可以仅为 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;
    }
}

它为破折号设置动画，并将运动显示为向前或向后的路径。此处给出的示例演示。但是我需要能够控制哪些虚线移动？我需要能够控制哪些虚线在节点之间移动以及不同节点之间的连接，以便我可以控制那里的动画。我查看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);

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

4

1 回答 1

0

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

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);
于 2020-02-20T17:05:57.297 回答