散景中的交互式散点高光

Question

我正在尝试可视化与其路径相关的传感器输出。

我在一个图中将路径绘制为散点图，在第二个图中绘制一定范围的信号幅度。我需要可视化（突出显示）获取特定读数的路径点。

我开始使用散景作为后端，总的来说，我需要的可视化效果非常好。但我被困在这种特殊的互动上。

我想要一些标记，例如锚定在图形中间的垂直线。当我移动/滚动幅度图（底部）时，我想突出显示路径图上最接近标记线的读数的点。

示例代码：（

我想锚定标记线并在红点和垂直线之间添加交互，获取信号的索引，未实现。）

import numpy as np

import pandas as pd

from bokeh.io import output_file

from bokeh.models import ColumnDataSource, HoverTool, Span

from bokeh.plotting import figure, show

from bokeh.layouts import gridplot

output_file('interactive_path_sig.html', title="interactive path")

class InteractivePath():

    def __init__(self):

        x = np.arange(0, 1000, 0.5)

        self.df = pd.DataFrame({"x": x,

                                "y": np.sin(x),

                                "z": np.cos(x)})

        self.source = ColumnDataSource(self.df)

    def plot_path(self):

        plt = figure(title = "Sensor Path")

        plt.scatter(x="x", y="y",source=self.source, 

                    line_color=None, size = 6)

        # TODO implement interaction instead of hard coded index

        index=500    # this is where I think I need to create working callback

        print("x={}, y={}".format(self.df['x'][index], self.df['y'][index]))

        plt.circle(x=self.df['x'][index], y=self.df['y'][index], 

                   fill_color="red", size=15)

        hover = HoverTool()

        hover.tooltips=[("index", "@index"), ("senosr","@z")]

        plt.add_tools(hover)

        return plt

    def plot_signal(self):

        plt = figure(x_range=(450, 550), title="Signal Amplitude")

        plt.line(x="index", y="z", source=self.source, line_color="black", line_width=2)

        # TODO implement interaction instead of hard coded index

        index = 500  # I think this needs emit some singal to other plot

        vline = Span(location=index, dimension='height', line_color='red', line_width=3)

        plt.renderers.extend([vline])

        return plt

Answer 1

所以有几点建议：我认为您会希望这两个图都使用相同的方法，因为它们之间的 columndatasource 是通用的，并且如果它们在同一范围内，您可以在它们之间设置 CustomJS 行为。index您正在使用的 已经存在于您的self.df绘图中，一旦它出现在您的绘图中，将更容易与之交互，因为您可以使用 JS 绘图行为来处理它，而不是返回到 python 变量并重新加载数据。不要为“突出显示”点绘制新字形，而是考虑使用内置的“悬停”或“选定”功能。hover_color='red'例如，可以替换绘制和移动另一类字形。如果您想保持静态选中状态，以便在屏幕截图中无需鼠标即可生成漂亮的报告，请使用的内置selected属性定义回调ColumnDataSource我可以发布一些带有更具体示例的实际代码块，但如果这些点中的任何一点对于您的实际用例来说是一个硬停止，它将推动解决方案。编辑：所以我使用一个类方法非常接近 - 问题是能够从第一个方法编辑第二个图，而不是对它ColumnDataSource本身的实际更改。def plot_it(self):    self.plot_signal = figure(x_range=(450, 550), y_range=(-1, 1), title='signal')    self.plot_signal.line(x='index', y='z', source=self.source)    self.plot_signal.segment(x0=500, y0=-2, x1=500, y1=2, source=self.source)    self.plot_path = figure(title='sensor')    self.plot_path.scatter(x='x', y='y', source=self.source, hover_color='red')    jscode='''    var data = source.data;    var plot_signal = plot_signal;    var index = cb_data.index['1d'].indices;    var xmin = 0;    var xmax = 0;    if (index > 0) {        xmin = index[0] - 50;        xmax = index[0] + 50;        plot_signal.x_range.end = xmax;        plot_signal.x_range.start = xmin;        plot_signal.change.emit();    }    hover_callback = CustomJS(args=dict(source=self.source, plot_signal=self.plot_signal), code=jscode)    hover.tooltips = [('index', '@index'), ('sensor', '@z')]    self.plot_path.add_tools(hover)def get_grid(self):    self.plot_it()    grid = gridplot([[self.plot_path], [self.plot_signal]])    return grid除了移动线段之外，这应该做所有事情。我找不到要添加的段命名约定plot_signal.SOMEOBJECT.x0，.x1但它只会if (index > 0)像使用index[0]. 我去掉了一些样式选项，因为我正在从另一台计算机转录。这个关于移动线段的问题可能会为您提供段 JSON 对象的语法。