Adding Edges Label to Tree Plot

📊 Plotly Python
1

Hi! Would anyone know how to add edges label to plotly? I know how to do it in igraph but for plotly, I’m quite unsure how. Thanks!

import igraph
from igraph import Graph, EdgeSeq
nr_vertices = 25
v_label = list(map(str, range(nr_vertices)))
G = Graph.Tree(nr_vertices, 2) # 2 stands for children number
lay = G.layout('rt')

position = {k: lay[k] for k in range(nr_vertices)}
Y = [lay[k][1] for k in range(nr_vertices)]
M = max(Y)

es = EdgeSeq(G) # sequence of edges
E = [e.tuple for e in G.es] # list of edges

L = len(position)
Xn = [position[k][0] for k in range(L)]
Yn = [2*M-position[k][1] for k in range(L)]
Xe = []
Ye = []
for edge in E:
    Xe+=[position[edge[0]][0],position[edge[1]][0], None]
    Ye+=[2*M-position[edge[0]][1],2*M-position[edge[1]][1], None]

labels = v_label

import plotly.graph_objects as go
fig = go.Figure()
labels = ["Long text<br>to show in the node<br>but it is covered<br>unfortunately", 
          "this is also<br>a long label",'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa']

fig.add_trace(go.Scatter(x=Xe,
                   y=Ye,
                   mode='lines',
                   line=dict(color='rgb(210,210,210)', width=1),
                   hoverinfo='skip' # previously is none
                   ))
fig.add_trace(go.Scatter(x=Xn,
                  y=Yn,
                  mode='markers+text',
                  name='bla',
                  customdata = labels, # added this
                  hovertemplate =   "%{customdata}<extra></extra>", # added this too
                  marker=dict(symbol='circle-dot',
                                size=18,
                                color='#6175c1',    #'#DB4551',
                                line=dict(color='rgb(50,50,50)', width=1)
                                ),
                  text=labels, # was labels
                  textfont_color = "black",
                  #hoverinfo='text',
                  opacity=0.8
                  ))


axis = dict(showline=False, # hide axis line, grid, ticklabels and  title
            zeroline=False,
            showgrid=False,
            showticklabels=False,
            )



fig.update_layout(title_text= 'Tree with Reingold-Tilford Layout',
                  title_x = 0.5,
              #annotations=make_annotations(position, v_label),
              font_size=12,
              showlegend=False,
              #xaxis=axis,
              #yaxis=axis,
                  xaxis_visible = False,
                  yaxis_visible = False,
              margin=dict(l=40, r=40, b=85, t=100),
              hovermode='closest',
              plot_bgcolor='rgb(248,248,248)'
              )
fig.show()
2

@zytan
To add edge labels to the above tree, compute the coordinates of the middle edges and add to fig a new scatter trace, mode=‘text’, and set text as the edgelabel list:

layt=np.asarray(lay)
elabel_pos=[]
for e in E:
    elabel_pos.append((layt[e[0]]+layt[e[1]])/2)

elabel_pos=np.asarray(elabel_pos)
fig.add_scatter(x=elabel_pos[:, 0], y=2*M-elabel_pos[:,1], mode='text', text=edge_label_list)