Question

当用户点击第一个情节上的圆圈时，我想显示简单文字（在第二个情节上）。我盯着散景网站上的工作示例，该网站显示了第一个情节。

我在下面做了一些更改，以便当用户在第一个绘图上单击一个圆时，第二个绘图应该显示相应的文本。因此，当用户在第一个图上点击圈（x = 1，y = 2）时，第二个图上显示的文字应为（＆＃39; first＆＃39;）

使用下面的代码，我根本看不到任何情节，也没有错误！我确定如何调试此问题

我也对不同的方法持开放态度

from bokeh.io import output_file, show
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource, Plot, Range1d, Text
from bokeh.layouts import column

output_file("styling_selections.html")

source = ColumnDataSource(data=dict(x = [1,2,3],
                                    y = [2,5,3],
                                    name = ['first', 'second', 'third'],
                                    ))


plot = figure(plot_width=400, plot_height=400, tools="tap", title="Select a circle")
renderer = plot.circle(x= 'x', y= 'y', size=50,
                       # set visual properties for selected glyphs
                       selection_color="firebrick",    
                       # set visual properties for non-selected glyphs
                       nonselection_fill_alpha=0.2,
                       nonselection_fill_color="blue",
                       nonselection_line_color="firebrick",
                       nonselection_line_alpha=1.0,
                       source = source)

def construct_text_box(source): 
    # Plot and axes                                                             
    xdr = Range1d(0, 220)                                                       
    ydr = Range1d(0, 120)                                                       

    plot = Plot(                                                                
        x_range=xdr,                                                            
        y_range=ydr,                                                            
        #title="",                                                               
        plot_width=250,                                                         
        plot_height=120,                                                        
        min_border=0,                                                           
    )                                                                           
    # Add the writing                                                           
    country = Text(x=5, y=50, text='cpname', text_font_size='18pt', text_color="#FFFFF", text_font_style="bold")                    
    plot.add_glyph(source, Text(), selection_glyph=country)                     

    return plot

text_box = construct_text_box(source)
show(column(plot,text_box))

Answer 1

您的代码中存在一些错误，导致无法显示绘图。调整以下内容至少会显示两个图。但是，第二个图将只是您想要的文本叠加在彼此之上。为了获得您正在寻找的功能，我猜您需要使用回调：

  # changed text parameter from cpname to name, thats the column you use
  # FFFFF was white, you wouldn't see this, changed to black
    country = Text(x=5, y=50, text='name', text_color="#000000")
    plot.add_glyph(source, country)

如果我找时间，我会稍后查看回调部分。但至少应该让你从正确的方向开始。

/ e：这是一个有效的例子。如前所述，添加回调会添加您希望的功能。棘手的部分是JavaScript代码。我希望评论足以理解它：

from bokeh.io import output_file, show, output_notebook, reset_output
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource, Plot, Range1d, Text, TapTool, CustomJS
from bokeh.layouts import column

reset_output()

source = ColumnDataSource(data=dict(x = [1, 10, 16], y = [2, 20, 10],
                                    name_labels = ['first', 'second', 'third'],
                                    name_display = ['','','']
                                    ))

plot = figure(plot_width=400, plot_height=400, tools="tap", title="Select a circle")
renderer = plot.circle(x= 'x', y= 'y', size=50,
                       # set visual properties for selected glyphs
                       selection_color="firebrick",    
                       # set visual properties for non-selected glyphs
                       nonselection_fill_alpha=0.2, nonselection_fill_color="blue",
                       nonselection_line_color="firebrick", nonselection_line_alpha=1.0,
                       source = source)

def construct_text_box(source): 
    # Plot and axes                                                             
    xdr = Range1d(0, 220)                                                       
    ydr = Range1d(0, 120)                                                       

    plot = Plot(                                                                
        x_range=xdr, y_range=ydr,                                                        
        plot_height=120, min_border=0,                                                           
    )                                                                           
    # Add the writing                                                           
    country = Text(x=5, y=50, text='name_display', text_color="#000000")
    plot.add_glyph(source, country)    
    return plot

output_notebook()

JS_CODE ="""
    // Get index of current selected datapoint
    sel_point_index = cb_data.source.attributes.selected["1d"]["indices"][0];     

    /* replace all name_display values with the name_label
       value of currently selected point */
    for (i=0; i < cb_data.source.data.name_labels.length; i++) {
        cb_data.source.data.name_display[i] = cb_data.source.data.name_labels[sel_point_index];
        }       
    cb_data.source.change.emit();
    """

newtaptool = plot.select(type=TapTool)
newtaptool.callback = CustomJS(code=JS_CODE)

text_box = construct_text_box(source)
show(column(plot, text_box))

散景 - 单击显示相应的文本

1 个答案: