Canvas d3js向右拖动按钮

我正在用画布构建十六进制地图。我必须用鼠标右键画一些细节。 我使用d3js缩放和移动画布。问题是我不能用右边的按钮画正确

我创建了一个简单的例子来说明问题所在

var width=$（'#map_canvas'）。width（），
高度=700；
var-ctx；
函数zooms（）{
if（d3.event.sourceEvent.button！==0）{
返回
}否则{
ofsetx=d3.event.translate[0]；
ofset=d3.event.translate[1]；
比例=d3.event.scale；
ctx.save（）；
ctx.clearRect（0，0，宽度，高度）；
ctx.translate（d3.event.translate[0]，d3.event.translate[1]）；
ctx量表（d3.event.scale，d3.event.scale）；
画（）
ctx.restore（）；
}
}
函数绘图（）{
ctx.beginPath（）；
ctx.arc（100,75,50,0,2*Math.PI）；
ctx.stroke（）；
}
var zoom=d3.behavior.zoom（）
.scaleExtent（[-2,10]）
.on（“缩放”，缩放）
$（函数（）{
ctx=d3。选择（“画布”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“of setx”，0）
.attr（“of sety”，0）
.呼叫（缩放）
.on（“dblclick.zoom”，null）
.on（“上下文菜单”，函数（d，i）{
d3.event.preventDefault（）；
})
.node（）.getContext（“2d”）；
draw（）；
});

检查

鼠标向下

，如果按钮错误，则关闭缩放/平移：

var width=$（'#map_canvas'）。width（），
高度=700；
var-ctx；
函数zooms（）{
ofsetx=d3.event.translate[0]；
ofset=d3.event.translate[1]；
比例=d3.event.scale；
ctx.save（）；
ctx.clearRect（0，0，宽度，高度）；
ctx.translate（d3.event.translate[0]，d3.event.translate[1]）；
ctx量表（d3.event.scale，d3.event.scale）；
画（）
ctx.restore（）；
}
函数绘图（）{
ctx.beginPath（）；
ctx.arc（100,75,50,0,2*Math.PI）；
ctx.stroke（）；
}
var zoom=d3.behavior.zoom（）
.scaleExtent（[-2,10]）
.on（“缩放”，缩放）
$（函数（）{
ctx=d3。选择（“画布”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“of setx”，0）
.attr（“of sety”，0）
.on（“mousedown”，function（）{
如果（d3.event.button！==0）{
d3.事件。停止即时复制（）；
}
})
.呼叫（缩放）
.on（“dblclick.zoom”，null）
.on（“上下文菜单”，函数（d，i）{
d3.event.preventDefault（）；
})
.node（）.getContext（“2d”）；
draw（）；
});