有没有一种方法可以根据 D3 中的 ID 突出显示边的顺序？答案

【问题标题】：Is there a method to highlight the order of edges according to ID in D3?有没有一种方法可以根据 D3 中的 ID 突出显示边的顺序？
【发布时间】：2023-02-01 05:04:30
【问题描述】：

我有一个这样的 GV 文件：

digraph Final_Graph {
    graph [center=true rankdir=LR ratio=compress size="15,10"]
    a
    b
    c
    d
    a -> b [label = 1 id=1]
    a -> c [label = 2 id=2]
    a -> d [label = 3 id=3]
    b -> d [label = 4 id=4]
    c -> d [label = 5 id=5]

    subgraph cluster_1{
        color=lightgrey style=filled
        label="A"
        a
        b
    }
    
    subgraph cluster_2{
        color=lightgrey style=filled
        label="B"
        a
        b
    }
    
    subgraph cluster_3{
        color=lightgrey style=filled
        label="C"
        c
        d
    }
}

我已经在 D3.js 中编写了我的代码，以便根据其 ID 突出显示每个边缘（将颜色更改为红色），因此 a->b 将首先突出显示 id=1，然后是 a->c (id=2)，依此类推。

这是我当前在 D3 中的代码：

let graphviz = d3.select(".graph").graphviz()
.transition(function () {
    return d3.transition("main")
        .ease(d3.easeLinear)
        .delay(500)
        .duration(1500);}
)
.logEvents(true)
.on("initEnd", render)
.on("end", function() {
    
    d3.selectAll("g.edge").sort(function(a,b){ // Set up edges.
        return a["id"] - b["id"];
    });
    let link = d3.selectAll("path");
    
    link.each(function(d, i) {
        setTimeout(function() {
            
            d3.select(link.nodes()[i]).transition().style("stroke", "red");
        }, i * 1000);
    })
});

但是，当我加载网站时，边缘并没有按照我的想法按升序突出显示；相反，突出显示顺序是 5->1->2->3->4。我已经检查了我的控制台并为节点添加了 ID，并根据 ID 重新排列了节点；然而，这也没有解决问题。

那么有没有什么方法可以让这个图中的边像我提到的那样用 1 到 5 的 ID 突出显示？

【问题讨论】：

标签： javascript d3.js graphviz

【解决方案1】：

我无法运行您的代码，所以我不清楚那里到底发生了什么。不过请注意，

div
  .selectAll(".edge")
  .nodes()
  .forEach(...)

应该按照边缘的放置顺序遍历边缘，因此不需要排序。

您可以在 this Observable notebook 中找到可以完成您想要的工作的代码。这是一个有点简陋的动画 GIF 的结果：

我认为更好的方法可能是对边缘的绘制进行动画处理，如下所示：

两个图像的代码都可以在that same Observable notebook 中找到，它运行起来比这里的动画流畅得多。

【讨论】：