D3js Network Graph - Only drag fires on clicks

Question

I have a network chart where I want nodes to display more information when the user clicks on them. I want the graph to also have drag/move behavior.

But I can't seem to get them both to play nice. When I have drag, it is the only one that fires and the click is ignored. If I comment out the drag behavior, then the click works as intended.

Here is my block: https://bl.ocks.org/Ognami/fe2757512bb709b22b826f0f48f9f247

I thought that the drag only pays attention to mousedown over 500ms or something, but it seems it just immediately goes to drag every time? Your thoughts are appreciated!

Answer 1

If you want to combine click and drag events, you can call stop propagation on click event.

So attaching events in your code can look like this:

node = node.enter().append("g")
.attr("class", "node")
.merge(node)
.on("click", function(d, i) {
  d3.event.stopPropagation();
  loadInfo(d, i);
})
.call(d3.drag()
  .on("start", dragstarted)
  .on("drag", dragged)
  .on("end", dragended))

example: http://jsfiddle.net/5zyk6zkd/