mouseover event is not fired up to click event fire in d3

Question

I am new for d3 , I worked on tree chart, on that mouseover event is not fired up to click event fire. If the click event is fired on some node the mouseover is worked only for those child nodes only.

code is :

 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

Here is your fiddle : https://jsfiddle.net/thatoneguy/xdpzrxx1/2/

This is working. I have added the following to test :

    .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)});

I have also moved your DragDropManager object to the top of the JavaScript as before it wasn't getting found. This was due to it being global and instantiated after other elements, that depended on it, were created.