Javascript 如何用左键单击而不是右键单击打开D3.js上下文菜单

我想在鼠标左键单击事件上显示上下文菜单，目前在我的示例中，它正在右键单击上工作。如果我再次点击其他地方，它就会隐藏起来。我该怎么做

你也可以在这里看到我的代码

var数据=[{
文字：“苹果”，
图标：'https://i.stack.imgur.com/5mrSI.jpg?s=32&g=1'
}, {
文字：“橙色”，
图标：'https://i.stack.imgur.com/5mrSI.jpg?s=32&g=1',
}, {
文本：“香蕉”，
图标：'https://i.stack.imgur.com/5mrSI.jpg?s=32&g=1'
}, {
文字：“葡萄”，
图标：'https://i.stack.imgur.com/5mrSI.jpg?s=32&g=1'
}];
var svgContainer=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，200）
.attr（“高度”，200）；
变量圆=SVG容器
.附加（“圆圈”）
.attr（“cx”，30）
.attr（“cy”，30）
.attr（“r”，20）
.on（'contextmenu'，函数（d，i）{
//创建将保存上下文菜单的div元素
d3.选择全部（'.context menu'）。数据（[1]）
.输入（）
.append（'div'））
.attr（'class'，'context menu'）；
//关闭菜单
d3.选择（'body'）。打开（'click.context menu'，function（））{
d3.选择（'.context menu'）.style（'display'，'none'）；
});
//当contextmenu事件发生时执行此操作
d3.选择全部（“.关联菜单”）
.html（“”）
.append（'ul'）
.selectAll（'li'）
.数据（数据）
.输入（）
.append（'li'）
.append（函数（d）{
const icon=document.createElement（'img'）；
icon.src=d.icon；
返回图标；
})
.选择（函数（）{
返回此.parentNode；
})
.append（'span'）
.文本（功能（d）{
返回d.text；
})
.on（'点击'）功能（d）{
});
d3.选择（'.context menu'）.style（'display'，'none'）；
//显示关联菜单
d3.选择（“.关联菜单”）
.style（'left'，（d3.event.pageX-2）+'px'）
.style（'top'，（d3.event.pageY-2）+'px'）
.style（“显示”、“块”）；
d3.event.preventDefault（）；
});
。上下文菜单{
位置：绝对位置；
显示：无；
背景色：#F2F2；
边界半径：4px；
字体系列：Arial，无衬线；
字体大小：14px；
最小宽度：150px；
边框：1px实心#d4；
z指数：1200；
}
.上下文菜单{
列表样式类型：无；
利润率：4px0px；
填充：0px；
游标：默认值；
}
.上下文菜单ul li{
填充：4px16px；
}
.关联菜单ul li:悬停{
背景色：#4677f8；
颜色：#fefefe；
}
如果更改JSFIDLE中的行：

.on('contextmenu', function(d, i) {

到

你应该得到一个弹出窗口的行动。我注意到这里还有其他一些click和preventDefault（）调用，因此这些调用可能与click事件冲突

.on('mousedown', function(d, i) {