score:1

i don't know d3.js, but i see you've included the graphviz tag as well, so i've created the dot syntax below. hope it's helpful in some way!

graph graphname {
    graph [ranksep=3, nodesep=4] // these options are used to approach the example image as close as possible
    edge [fontname="arial"]
    rankdir=tb
    node [style="solid", fontname="arial"]
        d1 [label="device 1"]
        d2 [label="device 2"]
        d3 [label="device 3"]
    // dirty: i tweaked the label position with leading or trailing spaces
    d1 -- d2 [
        taillabel="interface1"
        headlabel="interface2    "
        labelfontcolor="darkgreen"
        ]
    d2 -- d3 [ // had to use html labels to give distinct colors to head and tail
        taillabel=<<font color="#006400">   interface 4</font>>
        headlabel=<<font color="#ff1a1a">interface 3    </font>>
        ]
    {rank=same d1;d3} // keeps device 1 and 3 on same level
}

when running this through dot i get this image:

enter image description here

credits to this answer for describing how to achieve different head- and tail-labels.


Related Query

More Query from same tag