在d3中单击事件触发时未触发mouseover事件

Question

我是 d3 的新手，我在树图表上工作，鼠标悬停事件未触发点击< / strong>事件火灾。如果在某个节点上触发单击事件，鼠标悬停仅适用于这些子节点。

代码是：

 var nodeEnter = node.enter().append("g")
  .attr("class", "node")
  .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
  .attr('pointer-events', 'all')
  .on("mouseover", overNode)
  .on("mouseout", outNode)
  .on("mouseUp",mouseUp)
  .on("click", click);

function click(d) {  
   if (d.children) {
      d._children = d.children;
      d.children = null;  
   } else {
      d.children = d._children;
      d._children = null;  
   }  
   update(d);
}

Answer 1

这是你的小提琴：https://jsfiddle.net/thatoneguy/xdpzrxx1/2/

这很有效。我添加了以下内容进行测试：

    .on("mouseover", function(d){ console.log(d); overNode(d)})
    .on("mouseout",  function(d){ console.log(d); outNode(d)}) 
    .on("mouseUp",  function(d){ console.log(d); mouseUp(d)})
    .on("click",  function(d){ console.log(d); click(d)});

我还将DragDropManager对象移动到JavaScript的顶部，就像之前没有找到它一样。这是因为它是全局的并且在创建了依赖于它的其他元素之后被实例化。