Question

我正在尝试开发一个滑块，该滑块将根据节点属性的值来限制网络图中可见的节点数量。下面的Pandas DataFrame（df）代表节点以及节点的关联属性（计数信息）。

source   target   source_count   target_count
A        C        15             10
A        D        15             20
A        E        15             30
B        F        25             10
B        G        25             20
B        H        25             30

我已使用以下代码为节点及其相关属性生成网络图。

import pandas as pd
from bokeh.layouts import column, widgetbox,layout, 
from bokeh.plotting import figure, show, output_file, 
from bokeh.models import HoverTool, value,PanTool, LabelSet, Legend, ColumnDataSource,Circle,Plot, Range1d, MultiLineBoxSelectTool,ResetTool,LassoSelectTool,Slider
from bokeh.models.callbacks import CustomJS
from bokeh.models.graphs import from_networkx, NodesAndLinkedEdges, EdgesAndLinkedNodes


df = pd.DataFrame({
            "source":["A", "A", "A", "B", "B","B"],
            "target":["C", "D", "E", "F", "G","H"],
            "source_count":["15", "15", "15", "25","25","25"]
            "target_count":["10", "20", "30", "10","20","30"]
})

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

#assign attributes
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']


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.glyph = Circle(size=20,fill_color = 'blue') 
graph_setup.edge_renderer.glyph = MultiLine(line_color="red", line_alpha=0.8, line_width=1)

graph_plot.renderers.append(graph_setup)

output_file("test_1.html")
show(graph_plot)

我尝试使用的滑块使用yearly_count属性来限制显示的节点数。我知道Bokeh允许嵌入JavaScript回调，但是，我还没有看到与NetworkX集成的用例。

任何人都可以提供的任何帮助将不胜感激。

Answer 1

如果您可以使用bokeh serve运行应用，那么我会尝试：

from bokeh.models import Slider

graph_plot= Plot()
graph_setup.node_renderer.glyph = Circle()
graph_setup.edge_renderer.glyph = MultiLine()

def callback(attr, old, new):
    //filter your data here to show less nodes and edges based 
    graph_setup.node_renderer.data_source.data = data
    graph_setup.edge_renderer.data_source.data = data

slider = Slider()
slider.on_change('value', callback)

如果您要运行Bokeh独立应用程序，则将滑块回调替换为：

code = """
    //filter your data here to show less nodes and edges
    graph_setup.node_renderer.data_source.data = data;
    graph_setup.edge_renderer.data_source.data = data; """

callback = CustomJS(args = dict(graph_setup = graph_setup, data = data), code = code)
slider = Slider()
slider.js_on_change('value', callback)

请参见下面的完整JS回调示例：

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 from_networkx, EdgesAndLinkedNodes
from bokeh.palettes import Spectral4
from dask.dataframe.core import DataFrame
import pandas as pd

data = {'source': ['A', 'A', 'A', 'A', 'A', 'A'], 'target': ['C', 'D', 'E', 'F', 'G', 'H'], 'source_count': [15, 15, 15, 25, 25, 25], 'target_count': [10, 20, 30, 10, 20, 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']

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.glyph = Circle(size = 20, fill_color = 'blue')
graph_setup.edge_renderer.glyph = MultiLine(line_color = "red", line_alpha = 0.8, line_width = 1)

graph_plot.renderers.append(graph_setup)

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

    new_start = new_start.splice(0, cb_obj.value)
    new_end = new_end.splice(0, cb_obj.value)
    new_index = ['A'].concat(new_end)

    new_data_edge = {'start': new_start, 'end': new_end};
    new_data_nodes = {'index': new_index};
    graph_setup.edge_renderer.data_source.data = new_data_edge; 
    graph_setup.node_renderer.data_source.data = new_data_nodes; 
"""
callback = CustomJS(args = dict(graph_setup = graph_setup,
                                start = df['source'].values,
                                end = df['target'].values), code = code)
slider = Slider(title = 'Slider', start = 1, end = 6, value = 6)
slider.js_on_change('value', callback)

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

结果：

Answer 2

较新版本的Bokeh对JavaScript（see release log）使用严格模式，这意味着Tony接受的答案中的code对2.0.0及更高版本的Bokeh不起作用。对于新的Bokeh版本，代码只需要几个小的显式变量声明即可：

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

    new_start = new_start.splice(0, cb_obj.value)
    new_end = new_end.splice(0, cb_obj.value)
    new_index = ['A'].concat(new_end)

    var new_data_edge = {'start': new_start, 'end': new_end};
    var new_data_nodes = {'index': new_index};
    graph_setup.edge_renderer.data_source.data = new_data_edge; 
    graph_setup.node_renderer.data_source.data = new_data_nodes;
'''

基于Networkx节点属性值与Bokeh的滑块

2 个答案: