1

我获得了一个图表，其中节点中有许多节点我必须在单击右键后创建一个自定义菜单。所以在我的代码中我应该添加什么以便我自己的自定义值而不是普通菜单出现？在这里，我有一个散景代码，它将生成节点。我已经为我的自定义右键单击包含了 HTML v=block，它可以正常工作。那么如何将 HTML 脚本集成到我的散景代码中呢？HTML 代码也出现在散景代码下。 我的代码

'''Bokeh'''
plot_width = 1400
plot_height=  900

#Add the addtributes of the node
nx.set_node_attributes(G,  node_size, name='node_size')
nx.set_node_attributes(G,  node_color, name='node_color')
nx.set_node_attributes(G, label_name_hover, name='lable_hover')
nx.set_node_attributes(G, label_hover_2, name='label_hover_2')


source = ColumnDataSource(pd.DataFrame.from_dict({k:v for k,v in G.nodes(data=True)}, orient='index'))

plot = Plot(plot_width=plot_width, plot_height=plot_height,
            x_range=Range1d(-1.1,1.1), y_range=Range1d(-1.1,1.1), 
            min_border_bottom=0, min_border_top=0)


#Add Network Graph to bokeh and define the fixed positions
graph_renderer = from_networkx(G, nx.spring_layout, pos = new_pos)
plot.add_tools(TapTool(), BoxSelectTool())
#Lable Hover
# plot.add_tools(HoverTool(tooltips='@lable_hover'))

import jinja2 '''This html code I have to embed under the bokeh code so that it will work'''
from bokeh.embed import components
template = jinja2.Template("""
<!doctype html>
<html>
    <head>
        <script>
            src="http://cdn.pydata.org/bokeh/dev/bokeh-0.13.0.min.js"
            var menuDisplayed = false;
            var menuBox = null;
           
            window.addEventListener("contextmenu", function() {
                var left = arguments[0].clientX;
                var top = arguments[0].clientY;
               
                menuBox = window.document.querySelector(".menu");
                menuBox.style.left = left + "px";
                menuBox.style.top = top + "px";
                menuBox.style.display = "block";
               
                arguments[0].preventDefault();
               
                menuDisplayed = true;
            }, false);
           
            window.addEventListener("click", function() {
                if(menuDisplayed == true){
                    menuBox.style.display = "none";
                }
            }, true);
        </script>
        <style>
            .menu
            {
                width: 150px;
                box-shadow: 3px 3px 5px #888888;
                border-style: solid;
                border-width: 1px;
                border-color: grey;
                border-radius: 2px;
                padding-left: 5px;
                padding-right: 5px;
                padding-top: 3px;
                padding-bottom: 3px;
                position: fixed;
                display: none;
            }
           
            .menu-item
            {
                height: 20px;
            }
           
            .menu-item:hover
            {
                background-color: #6CB5FF;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="menu">
            <div class="menu-item">Add Node</div>
            <div class="menu-item">Delete Node</div>
            <div class="menu-item">Update Node</div>
        </div>
    </body>
</html>
""")
plot.add_tools(HoverTool(tooltips="""
        <div>
                </script>
                <span id="doc" style="font-size: 12px; font-weight: bold; color:green;">@lable_hover</span> 
                <br><span style="font-size: 12px; color: blue;">@label_hover_2</span>
                
        </div>
        
        """))


graph_renderer.node_renderer.data_source = source

graph_renderer.node_renderer.glyph = Circle(size='node_size', fill_color='node_color')
graph_renderer.node_renderer.hover_glyph = Circle(size=15, fill_color='yellow')

graph_renderer.edge_renderer.glyph = MultiLine(line_color="#000000", line_alpha=0.5, line_width=0.5)
graph_renderer.edge_renderer.selection_glyph = MultiLine(line_color='red', line_width=1)
graph_renderer.edge_renderer.hover_glyph = MultiLine(line_color='deeppink', line_width=1)

graph_renderer.selection_policy = NodesAndLinkedEdges()
# graph_renderer.inspection_policy = EdgesAndLinkedNodes()

#Fix layout positions
graph_renderer.layout_provider = StaticLayoutProvider(graph_layout=new_pos)   
plot.renderers.append(graph_renderer)

#Below part is to Get node positions
x, y = zip(*graph_renderer.layout_provider.graph_layout.values())
x = list(x)
y = list(y)
x = dict(zip(G.nodes, x))
y= dict(zip(G.nodes, y))
nx.set_node_attributes(G,  x, name='x')
nx.set_node_attributes(G,  y, name='y')
node_source = ColumnDataSource(pd.DataFrame.from_dict({k:v for k,v in G.nodes(data=True)}))
plot.background_fill_color = 'beige'
plot.background_fill_alpha = 0.5
tab_1 = Panel(child=plot, title = "Lexical Chains")
tabs = Tabs(tabs=[tab_1], sizing_mode = 'stretch_both')
output_file('lexical_graph_2.html')
show(tabs)
4

0 回答 0