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

Question

我想在鼠标事件的左键单击时显示上下文菜单，目前在我的示例中它正在处理右键单击。如果我再次点击其他地方它应该隐藏。我该怎么做？

你也可以在 jsFiddle

中看到我的代码

var data = [{
  text: 'Apple',
  icon: 'https://i.stack.imgur.com/5mrSI.jpg?s=32&g=1'
}, {
  text: "Orange",
  icon: 'https://i.stack.imgur.com/5mrSI.jpg?s=32&g=1',
}, {
  text: "Banana",
  icon: 'https://i.stack.imgur.com/5mrSI.jpg?s=32&g=1'
}, {
  text: "Grape",
  icon: 'https://i.stack.imgur.com/5mrSI.jpg?s=32&g=1'
}];

var svgContainer = d3.select("body")
  .append("svg")
  .attr("width", 200)
  .attr("height", 200);

var circle = svgContainer
  .append("circle")
  .attr("cx", 30)
  .attr("cy", 30)
  .attr("r", 20)
  .on('contextmenu', function(d, i) {
    // create the div element that will hold the context menu
    d3.selectAll('.context-menu').data([1])
      .enter()
      .append('div')
      .attr('class', 'context-menu');
    // close menu
    d3.select('body').on('click.context-menu', function() {
      d3.select('.context-menu').style('display', 'none');
    });
    // this gets executed when a contextmenu event occurs
    d3.selectAll('.context-menu')
     .html('')
      .append('ul')
      .selectAll('li')
      .data(data)
      .enter()
      .append('li')
      .append(function(d) {
        const icon = document.createElement('img');
        icon.src = d.icon;

        return icon;
      })
      .select(function () {
       return this.parentNode;
     })
      .append('span')
      .text(function (d) {
       return d.text;
      })
      .on('click', function(d) {
      });

    d3.select('.context-menu').style('display', 'none');
    // show the context menu
    d3.select('.context-menu')
      .style('left', (d3.event.pageX - 2) + 'px')
      .style('top', (d3.event.pageY - 2) + 'px')
      .style('display', 'block');
    d3.event.preventDefault();
  });

.context-menu {
  position: absolute;
  display: none;
  background-color: #f2f2f2;
  border-radius: 4px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  min-width: 150px;
  border: 1px solid #d4d4d4;
  z-index: 1200;
}

.context-menu ul {
  list-style-type: none;
  margin: 4px 0px;
  padding: 0px;
  cursor: default;
}

.context-menu ul li {
  padding: 4px 16px;
}

.context-menu ul li:hover {
  background-color: #4677f8;
  color: #fefefe;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 1

如果您更改 jsfiddle 中的行：

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

到

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

您应该会看到该操作的弹出窗口。我注意到您还有一些其他的 click 和 preventDefault() 调用，因此这些可能与 click 事件冲突。

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

How to open D3.js Context Menu on left click instead of Right click

javascript

d3.js

c3.js