Javascript 如何将工具栏添加到BokehJS绘图？

我的目标是为BokehJS绘图添加工具栏。根据本文，这应该可以通过以下方式实现（将Python示例转换为Javascript）：

我已经从文档中将这些行添加到了，它们不会产生错误/警告。但是，工具栏没有（正确地）显示，而且这些工具似乎也不起作用

我准备了一个极小的例子来演示这个问题：当使用矩形选择工具时，绘图会奇怪地四处移动，这会显示在绘图下面呈现的工具栏的未设置样式的版本

所以问题是如何在BokehJS中获得一个正常工作的工具栏

向根元素添加bk root<代码>

添加相应的css文件（bokeh-0.12.0.min.css和bokeh-widgets-0.12.0.min.css）

请点击此处：

此处的代码片段：

//创建一些数据和ColumnDataSource
var x=Bokeh.LinAlg.linspace（-0.5,20.5,10）；
变量y=x.map（函数（v）{
返回v*0.5+3.0；
});
var source=new Bokeh.ColumnDataSource({
数据：{
x:x，
y:y
}
});
//为绘图创建一些范围
var xdr=新的Bokeh.Range1d({
起点：-0.5，
完:20时5分
});
var ydr=波基范围1d（-0.5,20.5）；
//策划
变量图=新的Bokeh.图({
标题：“BokehJS阴谋”，
x_范围：xdr，
y_范围：ydr，
绘图宽度：400，
地块高度：400，
背景颜色：“F2F7”
});
//将轴添加到绘图中
var xaxis=新的Bokeh.LinearAxis({
轴线颜色：空
});
var yaxis=新的Bokeh.LinearAxis({
轴线颜色：空
});
绘图。添加_布局（xaxis，“下方”）；
绘图。添加_布局（yaxis，“左”）；
//将栅格添加到绘图中
var xgrid=新的Bokeh.Grid({
股票代码：xaxis.ticker，
维度：0
});
var ygrid=新的Bokeh.网格({
股票代码：yaxis.ticker，
尺寸：1
});
绘图。添加_布局（xgrid）；
plot.add_布局（ygrid）；
//添加线条图示符
var线=新Bokeh线({
x:{
字段：“x”
},
y:{
字段：“y”
},
线条颜色：“666699”，
线宽：2
});
绘图。添加图形符号（线、源）；
//现在添加工具
plot.add_工具（新的Bokeh.BoxZoomTool（））；
plot.add_工具（新的Bokeh.ResetTool（））；
plot.toolbar_location=“right”；
//将打印添加到文档并显示它
var doc=新的Bokeh.Document（）；
文件添加_根（绘图）；
var div=document.getElementById（“绘图”）；
Bokeh.embed.add_document_standalone（doc，div）
.mybokehplot{
位置：相对位置；
宽度：100%；
身高：100%；
边框：1px虚线#ccc；
}


plot.add_tools(new Bokeh.BoxZoomTool());
plot.add_tools(new Bokeh.ResetTool());
plot.toolbar_location = "right";