Is there a method to highlight the order of edges according to ID in D3?

I am having a GV file like this:

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

I have written my code in D3.js so that each of the edges would be highlighted (change color to red) according to its ID, so a->b would be highlighted first with id=1, followed up by a->c (id=2), and so on.

Here is my current code in 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);
    })
});

However when I load the website, the edges are not highlighted in ascending order as my idea; instead the highlighting order is 5->1->2->3->4. I have checked in my console and adding ID for nodes, as well as rearranging nodes according to ID; however that also did not solve the problem.

So is there any method to make edges in this graph highlighted with ID from 1 to 5 as I mentioned?