问题描述
在bokeh服务器项目上，我想单击graph3D（visjs）来播放python回调。
我设法扩展了bokeh以绘制scatter3D图（感谢this example）。
下一步是获取click事件并在js控制台上显示某些内容，但我无法在bokeh扩展打字稿代码中找到如何做到这一点。
visjs graph3d official documentation和an example with js code建议放置graph.on('click',console.log("blabla"))，但这给我一个错误Property 'on' does not exist on type 'Graph3d'。
我还尝试了onclick: <function>选项，就像在stackoverflow上看到的那样，没有成功。
import numpy as np
from bokeh.core.properties import Instance,String
from bokeh.io import show
from bokeh.models import ColumnDataSource,LayoutDOM
from bokeh.util.compiler import TypeScript
TS_CODE = """
// This custom model wraps one part of the third-party vis.js library:
//
// http://visjs.org/index.html
//
// Making it easy to hook up python data analytics tools (NumPy,SciPy,// Pandas,etc.) to web presentations using the bokeh server.
import {LayoutDOM,LayoutDOMView} from "models/layouts/layout_dom"
import {ColumnDataSource} from "models/sources/column_data_source"
import {LayoutItem} from "core/layout"
import * as p from "core/properties"
declare namespace vis {
class Graph3d {
constructor(el: HTMLElement,data: object,OPTIONS: object)
setData(data: vis.DataSet): void
}
class DataSet {
add(data: unkNown): void
}
}
// This defines some default options for the Graph3d feature of vis.js
// See: http://visjs.org/graph3d_examples.html for more details.
const OPTIONS = {
width: '600px',height: '600px',style: 'dot-color',showPerspective: true,showGrid: true,//onclick: (point: any) => { console.log(point) },// <- GIVES nothing
//onclick: () => {console.log("bip")},// <- DON'T WORK
keepAspectRatio: true,verticalRatio: 1.0,cameraPosition: {
horizontal: -0.35,vertical: 0.22,distance: 1.8,},}
// To create custom model extensions that will render on to the HTML canvas
// or into the DOM,we must create a View subclass for the model.
//
// In this case we will subclass from the existing bokehJS ``LayoutDOMView``
export class Scatter3dView extends LayoutDOMView {
model: Scatter3d
private _graph: vis.Graph3d
initialize(): void {
super.initialize()
const url = "https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"
const script = document.createElement("script")
script.onload = () => this._init()
script.async = false
script.src = url
document.head.appendChild(script)
}
private _init(): void {
// Create a new Graph3s using the vis.js API. This assumes the vis.js has
// already been loaded (e.g. in a custom app template). In the future bokeh
// models will be able to specify and load external scripts automatically.
//
// bokehJS Views create <div> elements by default,accessible as this.el.
// Many bokeh views ignore this default <div>,and instead do things like
// draw to the HTML canvas. In this case though,we use the <div> to attach
// a Graph3d to the DOM.
this._graph = new vis.Graph3d(this.el,this.get_data(),OPTIONS)
// Set a listener so that when the bokeh data source has a change
// event,we can process the new data
this.connect(this.model.data_source.change,() => {
this._graph.setData(this.get_data())
})
//this._graph.on('click',console.log("bob")) // <-- gives error : Property 'on' does not exist on type 'Graph3d'
}
// This is the callback executed when the bokeh data has an change. Its basic
// function is to adapt the bokeh data source to the vis.js DataSet format.
get_data(): vis.DataSet {
const data = new vis.DataSet()
const source = this.model.data_source
for (let i = 0; i < source.get_length()!; i++) {
data.add({
x: source.data[this.model.x][i],y: source.data[this.model.y][i],z: source.data[this.model.z][i],style: source.data[this.model.color][i],})
}
return data
}
get child_models(): LayoutDOM[] {
return []
}
_update_layout(): void {
this.layout = new LayoutItem()
this.layout.set_sizing(this.Box_sizing())
}
}
// We must also create a corresponding JavaScript bokehJS model subclass to
// correspond to the python bokeh model subclass. In this case,since we want
// an element that can position itself in the DOM according to a bokeh layout,// we subclass from ``LayoutDOM``
export namespace Scatter3d {
export type Attrs = p.AttrsOf<Props>
export type Props = LayoutDOM.Props & {
x: p.Property<string>
y: p.Property<string>
z: p.Property<string>
color: p.Property<string>
data_source: p.Property<ColumnDataSource>
}
}
export interface Scatter3d extends Scatter3d.Attrs {}
export class Scatter3d extends LayoutDOM {
properties: Scatter3d.Props
__view_type__: Scatter3dView
constructor(attrs?: Partial<Scatter3d.Attrs>) {
super(attrs)
}
// The ``__name__`` class attribute should generally match exactly the name
// of the corresponding Python class. Note that if using TypeScript,this
// will be automatically filled in during compilation,so except in some
// special cases,this shouldn't be generally included manually,to avoid
// typos,which would prohibit serialization/deserialization of this model.
static __name__ = "Scatter3d"
static init_Scatter3d() {
// This is usually boilerplate. In some cases there may not be a view.
this.prototype.default_view = Scatter3dView
// The @define block adds corresponding "properties" to the JS model. These
// should basically line up 1-1 with the Python model class. Most property
// types have counterparts,e.g. ``bokeh.core.properties.String`` will be
// ``p.String`` in the JS implementatin. Where the JS type system is not yet
// as rich,you can use ``p.Any`` as a "wildcard" property type.
this.define<Scatter3d.Props>({
x: [ p.String ],y: [ p.String ],z: [ p.String ],color: [ p.String ],data_source: [ p.Instance ],})
}
}
"""
# This custom extension model will have a DOM view that should layout-able in
# bokeh layouts,so use ``LayoutDOM`` as the base class. If you wanted to create
# a custom tool,you Could inherit from ``Tool``,or from ``Glyph`` if you
# wanted to create a custom glyph,etc.
class Scatter3d(LayoutDOM):
# The special class attribute ``__implementation__`` should contain a string
# of JavaScript code that implements the browser side of the extension model.
__implementation__ = TypeScript(TS_CODE)
# Below are all the "properties" for this model. bokeh properties are
# class attributes that define the fields (and their types) that can be
# communicated automatically between Python and the browser. Properties
# also support type validation. More @R_555_4045@ion about properties in
# can be found here:
#
# https://docs.bokeh.org/en/latest/docs/reference/core/properties.html#bokeh-core-properties
# This is a bokeh ColumnDataSource that can be updated in the bokeh
# server by Python code
data_source = Instance(ColumnDataSource)
# The vis.js library that we are wrapping expects data for x,y,and z.
# The data will actually be stored in the ColumnDataSource,but these
# properties let us specify the *name* of the column that should be
# used for each field.
x = String
y = String
z = String
color = String
X_data = np.random.normal(0,10,100)
Y_data = np.random.normal(0,100)
Z_data = np.random.normal(0,100)
color = np.asarray([0 for x in range(50)] + [1 for x in range(50)])
source = ColumnDataSource(data=dict(x=X_data,y=Y_data,z=Z_data,color=color))
myPlot = Scatter3d(x="x",y="y",z="z",color="color",data_source=source,width=600,height=600)
show(myPlot)
还有下一步，例如将js事件链接到python回调，但这是另一个主题-我接受所有建议;-）
解决方法
经过进一步调查，我发现我的代码有2处错误：
-
对于旧版本，
获得最新版本vis.jslib的调用已完成const url = "https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"
可以通过此网址const url = "https://unpkg.com/vis-graph3d@latest/dist/vis-graph3d.min.js" -
错误
Property 'on' does not exist on type 'Graph3d'是Typescript编译器引发的错误。vis.js文档非常清楚，graph3d作为onproperty to handle events
编译器某种程度上是错误的。在前面的行中添加// @ts-ignore可能会导致超速
最后，下面是一个工作代码
from bokeh.core.properties import Instance,String
from bokeh.models import ColumnDataSource,LayoutDOM
from bokeh.util.compiler import TypeScript
TS_CODE = """
// This custom model wraps one part of the third-party vis.js library:
//
// http://visjs.org/index.html
//
// Making it easy to hook up python data analytics tools (NumPy,SciPy,// Pandas,etc.) to web presentations using the Bokeh server.
import {LayoutDOM,LayoutDOMView} from "models/layouts/layout_dom"
import {ColumnDataSource} from "models/sources/column_data_source"
import {LayoutItem} from "core/layout"
import * as p from "core/properties"
declare namespace vis {
class Graph3d {
constructor(el: HTMLElement,data: object,OPTIONS: object)
setData(data: vis.DataSet): void
}
class DataSet {
add(data: unknown): void
}
}
// This defines some default options for the Graph3d feature of vis.js
// See: http://visjs.org/graph3d_examples.html for more details.
const OPTIONS = {
width: '600px',height: '600px',style: 'dot-color',showPerspective: true,showGrid: false,keepAspectRatio: true,verticalRatio: 1.0,showLegend: false,cameraPosition: {
horizontal: -0.35,vertical: 0.22,distance: 1.8,},tooltip: (point: any) => {
// parameter point contains properties x,y,z,and data
// data is the original object passed to the point constructor
return 'x: ' + point.x + ' y: ' + point.y + ' z: ' + point.z
},}
// To create custom model extensions that will render on to the HTML canvas
// or into the DOM,we must create a View subclass for the model.
//
// In this case we will subclass from the existing BokehJS ``LayoutDOMView``
export class Scatter3DView extends LayoutDOMView {
model: Scatter3D
private _graph: vis.Graph3d
initialize(): void {
super.initialize()
//const url = "https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"
//const url = "visjs.min.js"
const url = "https://unpkg.com/vis-graph3d@latest/dist/vis-graph3d.min.js"
const script = document.createElement("script")
script.onload = () => this._init()
script.async = false
script.src = url
document.head.appendChild(script)
}
private _init(): void {
// Create a new Graph3s using the vis.js API. This assumes the vis.js has
// already been loaded (e.g. in a custom app template). In the future Bokeh
// models will be able to specify and load external scripts automatically.
//
// BokehJS Views create <div> elements by default,accessible as this.el.
// Many Bokeh views ignore this default <div>,and instead do things like
// draw to the HTML canvas. In this case though,we use the <div> to attach
// a Graph3d to the DOM.
this._graph = new vis.Graph3d(this.el,this.get_data(),OPTIONS)
// Set a listener so that when the Bokeh data source has a change
// event,we can process the new data
this.connect(this.model.data_source.change,() => {
this._graph.setData(this.get_data())
})
// @ts-ignore
this._graph.on('click',this.on_click)
}
on_click(point: any): void {
console.log(point)
}
// This is the callback executed when the Bokeh data has an change. Its basic
// function is to adapt the Bokeh data source to the vis.js DataSet format.
get_data(): vis.DataSet {
const data = new vis.DataSet()
const source = this.model.data_source
for (let i = 0; i < source.get_length()!; i++) {
data.add({
x: source.data[this.model.x][i],y: source.data[this.model.y][i],z: source.data[this.model.z][i],style: {"fill": String(source.data[this.model.color][i]),"stroke": "#FFF"},//style: {"fill": "red","stroke": "#999"},//style: 1,})
//console.log(data)
}
return data
}
get child_models(): LayoutDOM[] {
return []
}
_update_layout(): void {
this.layout = new LayoutItem()
this.layout.set_sizing(this.box_sizing())
}
}
// We must also create a corresponding JavaScript BokehJS model subclass to
// correspond to the python Bokeh model subclass. In this case,since we want
// an element that can position itself in the DOM according to a Bokeh layout,// we subclass from ``LayoutDOM``
export namespace Scatter3D {
export type Attrs = p.AttrsOf<Props>
export type Props = LayoutDOM.Props & {
x: p.Property<string>
y: p.Property<string>
z: p.Property<string>
color: p.Property<string>
data_source: p.Property<ColumnDataSource>
}
}
export interface Scatter3D extends Scatter3D.Attrs {}
export class Scatter3D extends LayoutDOM {
properties: Scatter3D.Props
__view_type__: Scatter3DView
constructor(attrs?: Partial<Scatter3D.Attrs>) {
super(attrs)
}
// The ``__name__`` class attribute should generally match exactly the name
// of the corresponding Python class. Note that if using TypeScript,this
// will be automatically filled in during compilation,so except in some
// special cases,this shouldn't be generally included manually,to avoid
// typos,which would prohibit serialization/deserialization of this model.
static __name__ = "Scatter3D"
static init_Scatter3D() {
// This is usually boilerplate. In some cases there may not be a view.
this.prototype.default_view = Scatter3DView
// The @define block adds corresponding "properties" to the JS model. These
// should basically line up 1-1 with the Python model class. Most property
// types have counterparts,e.g. ``bokeh.core.properties.String`` will be
// ``p.String`` in the JS implementatin. Where the JS type system is not yet
// as rich,you can use ``p.Any`` as a "wildcard" property type.
this.define<Scatter3D.Props>({
x: [ p.String ],y: [ p.String ],z: [ p.String ],color: [ p.String ],data_source: [ p.Instance ],})
}
}
"""
# This custom extension model will have a DOM view that should layout-able in
# Bokeh layouts,so use ``LayoutDOM`` as the base class. If you wanted to create
# a custom tool,you could inherit from ``Tool``,or from ``Glyph`` if you
# wanted to create a custom glyph,etc.
class Scatter3D(LayoutDOM):
# The special class attribute ``__implementation__`` should contain a string
# of JavaScript code that implements the browser side of the extension model.
__implementation__ = TypeScript(TS_CODE)
# Below are all the "properties" for this model. Bokeh properties are
# class attributes that define the fields (and their types) that can be
# communicated automatically between Python and the browser. Properties
# also support type validation. More information about properties in
# can be found here:
#
# https://docs.bokeh.org/en/latest/docs/reference/core/properties.html#bokeh-core-properties
# This is a Bokeh ColumnDataSource that can be updated in the Bokeh
# server by Python code
data_source = Instance(ColumnDataSource)
# The vis.js library that we are wrapping expects data for x,and z.
# The data will actually be stored in the ColumnDataSource,but these
# properties let us specify the *name* of the column that should be
# used for each field.
x = String
y = String
z = String
color = String
我现在正在寻找一种将点击信息传递给bokeh服务器的方法。你知道怎么做吗？