javascript - d3 和 svg 中的自定义上下文菜单

Question

当我右键单击 svg 圆圈时，我希望出现自定义上下文菜单。现在我找到了这个答案，它可以帮助我使用以下代码处理右键单击：

.on("contextmenu", function(data, index) {
   //handle right click

   //stop showing browser menu
   d3.event.preventDefault()
});

现在我想知道如何显示一个包含一些 HTML 的框。

提前致谢。

Answer 1

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();
});

Answer 2

只是对已接受答案的评论（没有足够的分数直接评论）。但似乎最新版本的 d3 需要 d3.event.pageX 和 d3.event.pageY 而不仅仅是 x 和 y。根据此处的文档。

所以我的代码是（在这个站点的一些 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();
  })