如何在左键单击而不是右键单击打开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) {

你应该获得该动作的弹出窗口。我注意到你有其他点击和preventDefault（）调用，所以这些可能与点击事件冲突。