x_range 偏移量的链接平移

Question

我有两个图，我想将图 1 中的某些内容与图 2 中在 x 轴上向右移动的内容进行比较。

当我 link x 轴时链接平移有效：p2 = figure(x_range=p1.x_range, ...，但想查看第二个图的不同部分！

我希望它看起来像什么，但是 启用 linked panning:

这是我的简化示例代码，我的 feeble attempts 被注释掉了：

from numpy import arange, pi, sin

from bokeh.layouts import row
from bokeh.plotting import figure, output_file, show

output_file('custom_linked_ranges.html')

p1_xrange = (-6.5, 6.5)
p2_shift = 10

x1 = arange(-2 * pi, 2 * pi, 0.1)
y1 = sin(x1)
p1 = figure(title='first', x_range=p1_xrange, y_range=(-1.1, 1.1))
p1.circle(x1, y1, color="red")

x2 = arange(p2_shift - 2 * pi, p2_shift + 2 * pi, 0.1)
y2 = sin(x2)
p2 = figure(title="second", x_range=p1.x_range, y_range=(-1.1, 1.1))
p2.circle(x2, y2, color="blue")

# from bokeh.models import CustomJS
# 
# callback = CustomJS(args=dict(xr=p2.x_range), code=F"""
#     console.log(cb_obj)
#     console.log(cb_obj.start)
#     if (cb_obj is changed directly) {{
#         // encode change for p1
#         data['rel_start'] = [cb_obj.start - {p2_shift}]
#         data['rel_end'] = [cb_obj.end - {p2_shift}]
#     }} else {{
#         // cb_obj is changed
#         // decode change for p1
#         xr.start = data['rel_start'] + {p2_shift}
#         xr.end = data['rel_end'] + {p2_shift}
#     }}
# """)
#
# p2.x_range.js_on_change('start', callback)

layout = row(p1, p2)

show(layout)

我很想要这个功能，但是我对Bokeh框架了解不够。请帮忙！

Answer 1

from numpy import arange, pi, sin

from bokeh.layouts import row
from bokeh.models import CustomJS
from bokeh.plotting import figure, output_file, show

output_file('custom_linked_ranges.html')

p1_xrange = (-6.5, 6.5)
p2_shift = 10

x1 = arange(-2 * pi, 2 * pi, 0.1)
y1 = sin(x1)
p1 = figure(title='first', x_range=p1_xrange, y_range=(-1.1, 1.1))
p1.circle(x1, y1, color="red")

x2 = arange(p2_shift - 2 * pi, p2_shift + 2 * pi, 0.1)
y2 = sin(x2)
p2 = figure(title="second", x_range=tuple(i + p2_shift for i in p1_xrange), y_range=(-1.1, 1.1))
p2.circle(x2, y2, color="blue")

code = """\
const start = cb_obj.start + offset;
const end = cb_obj.end + offset;
// Need to update the attributes at the same time.
x_range.setv({start, end});
"""
for attr in ['start', 'end']:
    p1.x_range.js_on_change(attr, CustomJS(args=dict(x_range=p2.x_range,
                                                     offset=p2_shift),
                                           code=code))
    p2.x_range.js_on_change(attr, CustomJS(args=dict(x_range=p1.x_range,
                                                     offset=-p2_shift),
                                           code=code))


layout = row(p1, p2)

show(layout)

x_range 偏移量的链接平移

Linked Panning with offset on x_range

python

bokeh