Why is the plotting order not respected when I plot a Circle and a Multiline later?

问题

I am plotting some circles with blue color with one ColumnDataSource

On the order hand, once the circles are plotted, I plot a Multiline glyph as well. I use another source for this glyph.

The glyphs are plotted correctly but they do not respect the order I have plotted them. I want to plot the Multiline on the top of the figure to make it always visible.

from bokeh.plotting import figure
from bokeh.models.sources import ColumnDataSource, CDSView
from bokeh.models.filters import IndexFilter
from bokeh.palettes import Reds3
from bokeh.io import curdoc


ml_source = ColumnDataSource(data=dict(
    colors=[Reds3[0], Reds3[1]],
    xs=[[1, 20, 30, 50], [24, 25, 36, 57]],
    ys=[[4, 20, 50, 50], [10, 25, 35, 60]],
))

source = ColumnDataSource(data=dict(
    x=[7, 8, 9, 10, 15, 30, 55, 23, 50],
    y=[10, 8, 9, 20, 15, 30, 55, 23, 50],
))

plot = figure(
    width=500,
    height=500,
    toolbar_location='left',
    tools='pan,wheel_zoom,tap,lasso_select',
    output_backend='webgl',
)

plot.circle(
    x='x',
    y='y',
    radius=3,
    fill_color='blue',
    line_color=None,
    source=source,
)

ml_prof_line = plot.multi_line(
    xs='xs',
    ys='ys',
    source=ml_source,
    color='colors',
    line_width=5,
    line_alpha=1.0,
)

curdoc().add_root(plot)

I launch this with bokeh serve --show example.py

This is the result:

I have tried using the same source for both but the result is the same.

Is anything wrong? Is that the expected behaviour?

I think there is a bug with Multiline because if I use the line works as expected

plot.line(
    x='x',
    y='y',
    source=source,
    color='red',
    line_width=5,
    line_alpha=1.0,
)

Update

• I have posted this on an issue
• Finally it is a duplicated of this other issue: Mixed canvas and webgl glyphs are painted in wrong z-order

回答1:

I think we have this behavior becase circles are markers and lins are glyphs in terms of bokeh models. Changing circle to ellipse with same width and height works as ellipse is a glyph too. So just replace your plot.circle() with

plot.ellipse(
x='x',
y='y',
width=3,
height=3,
color='blue',
source=source
)

回答2:

Update 2019/06/07

This has already been fixed in the Bokeh Version 1.2.0

---

I found a better workaround now:

• Using Scatter glyphs
• Using size instead of radius. The scatter method does not have a radius attribute

from bokeh.plotting import figure
from bokeh.models.sources import ColumnDataSource, CDSView
from bokeh.models.filters import IndexFilter
from bokeh.models.markers import Scatter, Circle
from bokeh.models.tools import LassoSelectTool
from bokeh.palettes import Reds3
from bokeh.plotting import show


ml_source = ColumnDataSource(data=dict(
    colors=[Reds3[0], Reds3[1]],
    xs=[[1, 20, 30, 50], [24, 25, 36, 57]],
    ys=[[4, 20, 50, 50], [10, 25, 35, 60]],
))

source = ColumnDataSource(data=dict(
    x=[7, 8, 9, 10, 15, 30, 55, 23, 50],
    y=[10, 8, 9, 20, 15, 30, 55, 23, 50],
))

plot = figure(
    width=500,
    height=500,
    toolbar_location='left',
    tools='pan,wheel_zoom,tap,lasso_select',
    output_backend='webgl',
)

c = plot.scatter(
    x='x',
    y='y',
    size=20,
    fill_color='blue',
    line_color=None,
    line_alpha=1.0,
    source=source,

    nonselection_fill_color='blue',
    nonselection_line_color=None,
    nonselection_fill_alpha=1.0,
)
c.selection_glyph = Scatter(
    fill_color='yellow',
    line_color='red',
    line_alpha=1.0,
)

ml_prof_line = plot.multi_line(
    xs='xs',
    ys='ys',
    source=ml_source,
    color='colors',
    line_width=5,
    line_alpha=1.0,
)

show(plot)

来源：https://stackoverflow.com/questions/49895574/why-is-the-plotting-order-not-respected-when-i-plot-a-circle-and-a-multiline-lat