1

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?

maximus ツ
  • 7,949
  • 3
  • 25
  • 54
JAck28
  • 899
  • 4
  • 15
  • 40
  • Not sure what causes that, but I had HTML labels once and they were all offset on both axis. Just to confirm, that there's some work around needed and it's no isolated problem. – kaiser Oct 17 '13 at 21:49
  • 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. – JAck28 Oct 18 '13 at 14:07
  • Please add that as a separate answer, not as comment. – kaiser Oct 18 '13 at 14:57

1 Answers1

0

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.

JAck28
  • 899
  • 4
  • 15
  • 40