Jupyter Notebook 中的散景网络演化滑块未更新结果

问题描述

这是生成网络和 html 可视化文件代码 - 它应该根据 Slider 上的“值”进行更新(截图)。 但是滑动不会更新任何内容 - Safari 和 Chrome 也有同样的问题。

目标是查看网络演变并能够将值替换为例如日期、有效期等。一般来说,散景滑块适用于我可以在网上找到的其他类型的可视化效果

import networkx as nx
from bokeh.io import show,output_file
from bokeh.models import Plot,Range1d,MultiLine,Circle,TapTool,OpenURL,HoverTool,CustomJS,Slider,Column
from bokeh.models.graphs import EdgesAndLinkednodes
from bokeh.plotting import from_networkx
from bokeh.palettes import Spectral4
from dask.dataframe.core import DataFrame
import pandas as pd
import copy

data = {'source': ['A','A','B','B'],'target': ['C','D','E','F','G','H'],'source_count': [15,15,25,25],'target_count': [10,20,30,10,30]}

df = pd.DataFrame(data)

net_graph = nx.from_pandas_edgelist(df,'source','target')

for index,row in df.iterrows():
    net_graph.nodes[row['source']]['yearly_count'] = row['source_count']
    net_graph.nodes[row['target']]['yearly_count'] = row['target_count']

node_colors = []
for node in net_graph:
    if node in df["source"].values:
        node_colors.append("green")
    else:
        node_colors.append("maroon")

graph_plot = Plot(plot_width = 800,plot_height = 600,x_range = Range1d(-1.1,1.1),y_range = Range1d(-1.1,1.1))

node_hover_tool = HoverTool(tooltips = [("Name","@index"),("Yearly Count","@yearly_count")])
graph_plot.add_tools(node_hover_tool)

graph_setup = from_networkx(net_graph,nx.spring_layout,scale = 1,center = (0,0))

graph_setup.node_renderer.data_source.data['node_colors'] = node_colors
graph_setup.node_renderer.glyph = Circle(size = 20,fill_color = 'node_colors')
graph_setup.edge_renderer.glyph = MultiLine(line_color = "red",line_alpha = 0.8,line_width = 1)

graph_plot.renderers.append(graph_setup)

a_index = graph_setup.node_renderer.data_source.data['index'].index("A")
b_index = graph_setup.node_renderer.data_source.data['index'].index("B")

if a_index != 0:
        index_item = graph_setup.node_renderer.data_source.data[field][a_index]
        new_data = graph_setup.node_renderer.data_source.data[field][0:a_index] + graph_setup.node_renderer.data_source.data[field][a_index + 1:]
        new_data.insert(0,index_item)
        graph_setup.node_renderer.data_source.data[field] = new_data

if b_index != 1:
    for field in graph_setup.node_renderer.data_source.data:
        index_item = graph_setup.node_renderer.data_source.data[field][b_index]
        new_data = graph_setup.node_renderer.data_source.data[field][0:b_index] + graph_setup.node_renderer.data_source.data[field][b_index + 1:]
        new_data.insert(1,index_item)
        graph_setup.node_renderer.data_source.data[field] = new_data

backup_node_data = copy.deepcopy(graph_setup.node_renderer.data_source.data)
backup_edge_data = copy.deepcopy(graph_setup.edge_renderer.data_source.data)

code = """ 
    var new_start = start.slice();
    var new_end = end.slice();

    var new_index = ndata['index'].slice();
    var new_node_colors = ndata['node_colors'].slice();
    var new_yearly_count = ndata['yearly_count'].slice();

    new_start = new_start.splice(0,cb_obj.value)
    new_end = new_end.splice(0,cb_obj.value)

    new_data_edge = {'start': new_start,'end': new_end};

    new_data_nodes = {};    
    new_data_nodes['index'] = new_index.splice(0,cb_obj.value);
    new_data_nodes['node_colors'] = new_node_colors.splice(0,cb_obj.value);
    new_data_nodes['yearly_count'] = new_yearly_count.splice(0,cb_obj.value);

    console.log(new_data_edge)
    graph_setup.edge_renderer.data_source.data = new_data_edge; 
    graph_setup.node_renderer.data_source.data = new_data_nodes;  

    graph_setup.edge_renderer.data_source.change.emit();
    graph_setup.node_renderer.data_source.change.emit();
"""
callback = CustomJS(args = dict(graph_setup = graph_setup,start = df['source'].values,end = df['target'].values,ndata = backup_node_data,edata = backup_edge_data),code = code)

slider = Slider(title = 'Slider',start = 2,end = 8,value = 2)
slider.js_on_change('value',callback)


layout = Column(graph_plot,slider)
show(layout)

enter image description here

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)