首页 > 解决方案 > js_on_change 不适用于 Bokeh 上的网络图

问题描述

按照这个例子,我正在尝试使用Bokeh构建一个网络图,我可以在其中使用选择小部件来过滤我的数据。我的数据将如下所示:

source  target  var1    var2
        a   c   1.0     0.0
        b   g   2.0     0.0
        c   e   3.0     0.0
        e   a   0.0     1.0
        f   h   0.0     2.0

并且可以使用以下代码重新创建:

d = {'weight': [1, 2,3,1,2], 'var': ["var1","var1","var1","var2", "var2"], 'source': ["a", "b","c","e","f"], 'target': ["c","g","e","a","h"]}
df1 = pd.DataFrame(data=d)
df2 = df1.pivot( index= ["source","target"], values = "weight", columns = "var").reset_index()
df2 = df2.fillna(0)

基本上,我想创建可以过滤列(var1, var2)的网络图,它们将成为我图中的权重属性。(当此权重值大于 0 时过滤。)

为此,我尝试了以下方法。但即使图形呈现,当我更改所选值时,也没有任何反应。我也没有在控制台中看到任何错误。我不确定我做错了什么,可能是 JS 调用中的某些内容,因为我对此并不陌生,但我试图尽可能地重现该示例,但仍然不确定我哪里出错了。请帮忙!

from bokeh.plotting import from_networkx
from bokeh.plotting import figure, output_file, show
from bokeh.models import Plot, Range1d, MultiLine, Circle, HoverTool,NodesAndLinkedEdges,EdgesAndLinkedNodes, TapTool, BoxSelectTool,ColumnDataSource
from bokeh.models import CustomJS, ColumnDataSource, Select, Column

HOVER_TOOLTIPS = [("Search Term", "@index")]

title = "my title"
plot = figure(tooltips = HOVER_TOOLTIPS,
              tools="pan,wheel_zoom", 
              active_scroll='wheel_zoom',
              x_range=Range1d(-10.1, 10.1), 
              y_range=Range1d(-10.1, 10.1), 
              title=title, plot_width=1000
             )

category_default = "var1"
unique_categories = ["var1","var2"]

subset = df2
subset_data = subset[["var1","var2"]].to_dict("list") 

source = ColumnDataSource({
        "weight": subset[category_default],   
        "source": subset.source,
        "target": subset.target

    })

a = pd.DataFrame(source.data)

G = nx.from_pandas_edgelist(a[a["weight"] >0], edge_attr = "weight")

network_graph = from_networkx(G, networkx.spring_layout, scale=10, center=(0, 0), )
network_graph.edge_renderer.glyph = MultiLine(line_alpha=0.5, line_width="weight" )

select = Select(title='Category Selection', value=category_default, options=unique_categories)

callback = CustomJS(
        args={"subset_data": subset_data, "source": source},
    
        code="""
            
            source.data['weight'] = subset_data[cb_obj.value];
            source.change.emit();
            
        """)



plot.renderers.append(network_graph)
select.js_on_change("value", callback)

show(Column(plot, select))

标签: javascriptpythonnetworkxbokehbokehjs

解决方案


推荐阅读