简体   繁体   中英

BokehJS FreehandDrawTool does not plot line when dragging mouse in canvas

In BokehJS 2.4.2 the FreehandDrawTool documentation is showing in the toolbar, but no line is drawn when dragging the mouse in the canvas.

Here is a minimal example to reproduce the problem. This example is so minimalistic it is hard to figure out what could possibly be wrong.

let plot = Bokeh.Plotting.figure({
    tools: ['freehand_draw'],
    x_range: [0, 100],
    y_range: [0, 100],
});

Output of the minimal code to reproduce the problem

输出最少的代码来重现问题

Example from the FreehandDrawTool documentation

FreehandDrawTool 文档中的示例

What could prevent the line to be drawn when dragging the mouse in the canvas?

The goal is to have a working FreehandDrawTool.

UPDATE 1

Modified example according to Python example from @mosc9575 as follows and it works, The tool should be inactive by default. it will not work when the tool is active by default. When the FreehandDrawTool is active by default you need de deactivate and activate the tool again for it to work.

let source = new Bokeh.ColumnDataSource({
    data : {
        xs: [[0,50,100]],
        ys: [[0,50,0]],
    },
});

let r = plot.multi_line({
    'xs': { field: 'xs' },
    'ys': { field: 'ys' },
    source: source,
});

let freehand_draw = new Bokeh.FreehandDrawTool({
    active: false,
    empty_value: 1,
    renderers: [r],
});

plot.add_tools(freehand_draw);

在此处输入图像描述

You neew to create a renderer to make your example work. Without this renderer the draw tool has no option to add this values.

Python example

from bokeh.plotting import figure, show, output_notebook
from bokeh.models import FreehandDrawTool, ColumnDataSource
output_notebook()

plot = figure(
    x_range =  [0, 100],
    y_range =  [0, 100],
    width=400,
    height=400,
    tools = ""
)

source = ColumnDataSource(dict(xs=[[0,0]], ys=[[0,0]]))

r = plot.multi_line('xs', 'ys', source=source)
tool = FreehandDrawTool(renderers=[r], empty_value=1)
plot.add_tools(tool)
show(plot)

It looks like your are doing this in JS and not in python, therefore this copy will not work as copy'n'paste, but it ilustrates the concept.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM