我正在嘗試可視化與其路徑相關的傳感器輸出。我在一個圖中將路徑繪制為散點圖，在第二個圖中繪制一定范圍的信號幅度。我需要可視化（突出顯示）獲取特定讀數的路徑點。我開始使用散景作為后端，總的來說，我需要的可視化效果非常好。但我被困在這種特殊的互動上。我想要一些標記，例如錨定在圖形中間的垂直線。當我移動/滾動幅度圖（底部）時，我想突出顯示路徑圖上最接近標記線的讀數的點。示例代碼：（我想錨定標記線并在紅點和垂直線之間添加交互，獲取信號的索引，未實現。）import numpy as npimport pandas as pdfrom bokeh.io import output_filefrom bokeh.models import ColumnDataSource, HoverTool, Spanfrom bokeh.plotting import figure, showfrom bokeh.layouts import gridplotoutput_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
1 回答
GCT1015
TA貢獻1827條經驗 獲得超4個贊
所以有幾點建議：
我認為您會希望這兩個圖都使用相同的方法，因為它們之間的 columndatasource 是通用的，并且如果它們在同一范圍內，您可以在它們之間設置 CustomJS 行為。
index您正在使用的 已經存在于您的self.df繪圖中，一旦它出現在您的繪圖中，將更容易與之交互，因為您可以使用 JS 繪圖行為來處理它，而不是返回到 python 變量并重新加載數據。不要為“突出顯示”點繪制新字形，而是考慮使用內置的“懸?！被颉斑x定”功能。
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 對象的語法。
添加回答
舉報
0/150
提交
取消