D3.js 将单击事件绑定到上下文菜单列表元素_D3.js_Onclick_Contextmenu

D3.js 将单击事件绑定到上下文菜单列表元素

d3.js

D3.js 将单击事件绑定到上下文菜单列表元素,d3.js,onclick,contextmenu,D3.js,Onclick,Contextmenu,我正在生成动态上下文菜单，当用户右键单击某个形状时会显示该菜单。我已经成功地创建了上下文菜单，但是当用户从菜单中选择一个条目时，我很难捕捉到单击事件事件保持绑定到右键单击操作以创建上下文菜单，而不是左键单击菜单本身中的列表项我已经挖了这么多东西，没能找到什么东西让我走完剩下的路我希望在本例中，当用户单击列表元素并传递所单击项目的名称时触发console.log函数。在一个完美的世界里，它不会在最初的右键点击时触发，但我会得到我能得到的 <!DOCTYPE html> <h

我正在生成动态上下文菜单，当用户右键单击某个形状时会显示该菜单。我已经成功地创建了上下文菜单，但是当用户从菜单中选择一个条目时，我很难捕捉到单击事件

事件保持绑定到右键单击操作以创建上下文菜单，而不是左键单击菜单本身中的列表项

我已经挖了这么多东西，没能找到什么东西让我走完剩下的路

我希望在本例中，当用户单击列表元素并传递所单击项目的名称时触发console.log函数。在一个完美的世界里，它不会在最初的右键点击时触发，但我会得到我能得到的

<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>

<style>
.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;
}
</style>
<script>

var fruits = ["Apple", "Orange", "Banana", "Grape"];

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(fruits).enter()
    .append('li')

    //     THIS IS WHAT I CAN NOT GET TO WORK THE WAY I WANT IT TO WORK
    .on('click' , console.log( function(d) { return d; } + " clicked!"))


    .text(function(d) { return 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();
  });


</script>
</body>
</html>


.上下文菜单{
位置：绝对位置；
显示：无；
背景色：#F2F2；
边界半径：4px；
字体系列：Arial，无衬线；
字体大小：14px；
最小宽度：150px；
边框：1px实心#d4；
z指数：1200；
}
.上下文菜单{
列表样式类型：无；
利润率：4px0px；
填充：0px；
游标：默认值；
}
.上下文菜单ul li{
填充：4px16px；
}
.关联菜单ul li:悬停{
背景色：#4677f8；
颜色：#fefefe；
}
var水果=[“苹果”、“橘子”、“香蕉”、“葡萄”]；
var svgContainer=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，200）
.attr（“高度”，200）；
变量圆=SVG容器
.附加（“圆圈”）
.attr（“cx”，30）
.attr（“cy”，30）
.attr（“r”，20）
.on（'contextmenu'，函数（d，i）{
//创建将保存上下文菜单的div元素
d3.选择全部（'.context menu'）。数据（[1]）
.输入（）
.append（'div'））
.attr（'class'，'context menu'）；
//关闭菜单
d3.选择（'body'）。打开（'click.context menu'，function（））{
d3.选择（'.context menu'）.style（'display'，'none'）；
});
//当contextmenu事件发生时执行此操作
d3.选择全部（“.关联菜单”）
.html（“”）
.append（'ul'）
.selectAll（'li'）
.数据（水果）.输入（）
.append（'li'）
//这就是我不能以我想要的方式工作的原因
.on（'click'，console.log（函数（d）{return d；}+“clicked！”）
.text（函数（d）{return d；}）；
d3.选择（'.context menu'）.style（'display'，'none'）；
//显示关联菜单
d3.选择（“.关联菜单”）
.style（'left'，（d3.event.pageX-2）+'px'）
.style（'top'，（d3.event.pageY-2）+'px'）
.style（“显示”、“块”）；
d3.event.preventDefault（）；
});

下面是一个演示代码的plunkr（我不明白为什么不能用JSFIDLE运行它）：

请看这个

我基本上将您的click listener更新为：

.on('click' , function(d) { console.log(d); return d; })

看起来很好。

谢谢！这正是我需要的帮助。