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

Question

我希望在鼠标左键单击事件时显示上下文菜单，在我的示例中它目前只能在右键单击时使用。如果我再次单击其他地方，它应该隐藏起来。我该怎么做？您可以在jsFiddle 上查看我的代码。

var data = [{
  text: 'Apple',
  icon: 'https://istack.dev59.com/5mrSI.webp?s=32&g=1'
}, {
  text: "Orange",
  icon: 'https://istack.dev59.com/5mrSI.webp?s=32&g=1',
}, {
  text: "Banana",
  icon: 'https://istack.dev59.com/5mrSI.webp?s=32&g=1'
}, {
  text: "Grape",
  icon: 'https://istack.dev59.com/5mrSI.webp?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>

- Raichu

Answer 1

如果您更改jsfiddle中的行：

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

到

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

你应该会弹出一个窗口来执行该操作。我注意到你的代码中还有其他的click和preventDefault()调用，这些可能会与click事件发生冲突。

- Drenai