Python弦图(Plotly)-交互式工具提示

12

我按照这里的指南进行:

https://plot.ly/python/filled-chord-diagram/

然后我产生了这个:

enter image description here

在指南中,我按照ribbon_info代码添加了连接缎带的悬停信息,但是没有显示任何内容。 我只能让悬停信息显示在缎带末端。有人看到我错在哪里吗?

ribbon_info=[]
for k in range(L):

    sigma=idx_sort[k]
    sigma_inv=invPerm(sigma)
    for j in range(k, L):
        if matrix[k][j]==0 and matrix[j][k]==0: continue
        eta=idx_sort[j]
        eta_inv=invPerm(eta)
        l=ribbon_ends[k][sigma_inv[j]]  

        if j==k:
            layout['shapes'].append(make_self_rel(l, 'rgb(175,175,175)' ,
                                    ideo_colors[k], radius=radii_sribb[k]))
            z=0.9*np.exp(1j*(l[0]+l[1])/2)
            #the text below will be displayed when hovering the mouse over the ribbon
            text=labels[k]+' appears on'+ '{:d}'.format(matrix[k][k])+' of the same grants as  '+ '',
            ribbon_info.append(Scatter(x=z.real,
                                       y=z.imag,
                                       mode='markers',
                                       marker=Marker(size=5, color=ideo_colors[k]),
                                       text=text,
                                       hoverinfo='text'
                                       )
                              )
        else:
            r=ribbon_ends[j][eta_inv[k]]
            zi=0.9*np.exp(1j*(l[0]+l[1])/2)
            zf=0.9*np.exp(1j*(r[0]+r[1])/2)
            #texti and textf are the strings that will be displayed when hovering the mouse 
            #over the two ribbon ends
            texti=labels[k]+' appears on '+ '{:d}'.format(matrix[k][j])+' of the same grants as '+\
                  labels[j]+ '',

            textf=labels[j]+' appears on '+ '{:d}'.format(matrix[j][k])+' of the same grants as '+\
                  labels[k]+ '',
            ribbon_info.append(Scatter(x=zi.real,
                                       y=zi.imag,
                                       mode='markers',
                                       marker=Marker(size=0.5, color=ribbon_color[k][j]),
                                       text=texti,
                                       hoverinfo='text'
                                       )
                              ),
            ribbon_info.append(Scatter(x=zf.real,
                                       y=zf.imag,
                                       mode='markers',
                                       marker=Marker(size=0.5, color=ribbon_color[k][j]),
                                       text=textf,
                                       hoverinfo='text'
                                       )
                              )
            r=(r[1], r[0])#IMPORTANT!!!  Reverse these arc ends because otherwise you get
                          # a twisted ribbon
            #append the ribbon shape
            layout['shapes'].append(make_ribbon(l, r , 'rgb(255,175,175)', ribbon_color[k][j]))

变量的输出如下:

texti = (u'Sociology appears on 79 of the same grants as Tools, technologies & methods',)

textf = (u'Tools, technologies & methods appears on 79 of the same grants as Sociology',)

ribbon_info = [{'hoverinfo': 'text',
  'marker': {'color': 'rgba(214, 248, 149, 0.65)', 'size': 0.5},
  'mode': 'markers',
  'text': (u'Demography appears on 51 of the same grants as Social policy',),
  'type': 'scatter',
  'x': 0.89904409911342476,
  'y': 0.04146936036799545},
 {'hoverinfo': 'text',
  'marker': {'color': 'rgba(214, 248, 149, 0.65)', 'size': 0.5},
  'mode': 'markers',
  'text': (u'Social policy appears on 51 of the same grants as Demography',),
  'type': 'scatter',
  'x': -0.65713108202353809,
  'y': -0.61496238993825791},..................**etc**

sigma = array([ 0, 14, 12, 10,  9,  7,  8,  5,  4,  3,  2,  1,  6, 16, 13, 11, 15], dtype=int64)

在构建弦图的前一个代码块之后,接下来的代码如下:

ideograms=[]
for k in range(len(ideo_ends)):
    z= make_ideogram_arc(1.1, ideo_ends[k])
    zi=make_ideogram_arc(1.0, ideo_ends[k])
    m=len(z)
    n=len(zi)
    ideograms.append(Scatter(x=z.real,
                             y=z.imag,
                             mode='lines',
                             line=Line(color=ideo_colors[k], shape='spline', width=0),
                             text=labels[k]+'<br>'+'{:d}'.format(row_sum[k]), 
                             hoverinfo='text'
                             )
                     )


    path='M '
    for s in range(m):
        path+=str(z.real[s])+', '+str(z.imag[s])+' L '

    Zi=np.array(zi.tolist()[::-1]) 

    for s in range(m):
        path+=str(Zi.real[s])+', '+str(Zi.imag[s])+' L '
    path+=str(z.real[0])+' ,'+str(z.imag[0]) 

    layout['shapes'].append(make_ideo_shape(path,'rgb(150,150,150)' , ideo_colors[k]))

data = Data(ideograms+ribbon_info)
fig=Figure(data=data, layout=layout) 

plotly.offline.iplot(fig, filename='chord-diagram-Fb') 

这是唯一显示的悬停信息,是外部标签而非稍微向内侧的标签:

在此输入图像描述

使用我问题开头链接中的示例。它们有两组标签。在我的示例中,“Isabelle已评论了Sophia的32个...”等效内容未显示。

在此输入图像描述


从提供的链接中: "ribbon_info是一个字典列表,设置当鼠标悬停在缎带末端时显示的信息。" Plotly仅允许对标记使用hoverinfo,而不是连接线。 - Maximilian Peters
所以它有一个标记:"mode": "markers","hoverinfo": "text","y": 0.24497006996652776,"x": -0.8660194367452698,"type": "scatter"},{"text": ["发展研究出现在与社会政策相同的66项拨款中"],"marker": {"color": "rgba(248, 212, 141, 0.65)", "size": 0.5} ...... 对于其中一个标记,它并没有显示,这是因为-0.86超出了图表范围吗?有一些带正数的标记,所以可能不是这个原因。 - Nicholas
我已经在问题中添加了一张额外的截图,以展示给您正在显示的标签。它下面略微偏低的是其他标签 :) - Nicholas
谢谢!这真的澄清了问题的范围。在圆圈内完全显示标签很混乱,但其他的应该是可行的。 - Maximilian Peters
我已经添加了链接示例的另一张图片。所以我可以让“Isabella”显示出来,但是我无法让“Isabella评论了32....”显示出来,这比“Isabella”标签略微在圆圈中更多。 - Nicholas
显示剩余4条评论
2个回答

2
我找到了解决方案。原来ribbon_info不喜欢离线运行,只要我在线上运行它就会显示出来。也就是说,它不能在plotly.offline中运行。你必须在线上运行它。
编辑:不确定为什么被踩了,很多人都使用plotly离线版。希望这能帮到你!

2
两年前,Plotly发布了弦图生成的代码。在此期间,Plotly形状的定义进行了一些更改。为了使离线模式下的工具提示正常工作,您需要执行以下操作:
1)插入以下行:
layer='below'

在函数 make_ideo_shapemake_ribbonmake_self_rel 返回的字典中;
在定义列表 ribbon_info 的单元格中,将包含这些值的列表分配给每个包含 ribbon_info.append 的三行中的 x 和 y。
x=[z.real],
y=[z.imag],

x=[zi.real],
y=[zi.imag],

分别是,
x=[zf.real],
y=[zf.imag],

相应的笔记本现在已更新。感谢Python StackOverflow @PythonStack指出了这个错误:https://twitter.com/PythonStack/status/914924595953721344。你可以访问https://plot.ly/python/filled-chord-diagram/查看。请注意保留html标签。

这真的很有帮助。非常感谢您在我的帖子上做出回应!尤其是考虑到它的年龄。 - Nicholas

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接