我希望在右键单击 svg 圆圈时出现自定义上下文菜单。 现在我找到了this 答案，它可以帮助我使用以下代码处理右键单击：
.on("contextmenu", function(data, index) {
//handle right click
//stop showing browser menu
d3.event.preventDefault()
});
现在我想知道如何显示一个包含一些 HTML 的框。
提前致谢。
【问题讨论】：
标签： javascript svg contextmenu d3.js right-click
d3.select('#stock_details .sym').on("contextmenu", function(data, index) {
var position = d3.mouse(this);
d3.select('#my_custom_menu')
.style('position', 'absolute')
.style('left', position[0] + "px")
.style('top', position[1] + "px")
.style('display', 'block');
d3.event.preventDefault();
});
【讨论】：
display:none）并具有属性 id="my_custom_menu" 然后，在“contextmenu”处理程序中放置类似d3.select('#my_custom_menu').style('display', 'block') 它会出现。
只是对已接受答案的评论（没有足够的分数直接评论）。但似乎最新版本的 d3 需要 d3.event.pageX 和 d3.event.pageY 而不仅仅是 x 和 y。根据文档here。
所以我的代码是（借助 site 的一些 IE 帮助）：
.on('contextmenu', function(data, index) {
if (d3.event.pageX || d3.event.pageY) {
var x = d3.event.pageX;
var y = d3.event.pageY;
} else if (d3.event.clientX || d3.event.clientY) {
var x = d3.event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
var y = d3.event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
d3.select('#action_div')
.style('position', 'absolute')
.style('left', x + 'px')
.style('top', y + 'px')
.style('display', 'block');
d3.event.preventDefault();
})
【讨论】：