Infovis with Html label - node drag no longer working

Question

I am using a html label for my nodes in a force directed graph.

Label:{
  type: 'HTML'
},

onCreateLabel: function (domElement, node) {
  domElement.innerHTML = node.name;
  var style = domElement.style;
  style.border = "1px solid red"
  style.fontSize = "1.5em";
  style.color = "#ddd";
},

onPlaceLabel: function (domElement, node) {
  var style = domElement.style;
  var left = parseInt(style.left);
  var top = parseInt(style.top);
  var w = domElement.offsetWidth;
  style.left = (left - w / 2) + 'px';
  style.top = (top + 30) + 'px';
  style.display = '';
}

This looks fine. However, when I try to move the nodes around the canvas...I am not able to. If place my mouse over a node, left click, and then drag, the whole graph moves -- not just the selected node. The html is placed below the node, but I am still not able to drag any specific node around the canvas any more. Any idea how I can fix this?

Answer 1

As a temporary workaround, I ended up creating a transparent border for the label that extended up over the node (border-top: 150px solid transparent); ...the border makes the node clickable.