2

I have just moved from visualizing Force Feedback Graphs in pure D3.js to the amazing Graph analysis library JSNetworkX (a JavaScript port of NetworkX). Now I know that JSNetworkX uses D3.js in the background for visualisation but I cannot work out how to get labels OUTSIDE of the actual Node to display. I mean sure, I can get Edge labels but that is a different thing. In D3.js you have to use an actual SVG Text element but this all seems abstracted away.

http://jsnetworkx.org/

I have tried using all the different label attributes but I just end up with either no label or a label which is smack bang in the middle of the Node.

I found a thread which seems to refer to an older version but even changing the syntax it doesn't work.

https://github.com/fkling/JSNetworkX/issues/16

I would really love to be able to visualize the labels outside of the nodes because inside of the node then it just looks like a mess.

Please help! Oh and please refer to the latest version (0.34) because previous answers refer to old depreciated versions.

Peter Rogers
  • 41
  • 2

1 Answers1

0

OK, so to answer my own question...

Basically it appears there are only two labels: the node label; and the edge label. The edge label appears to be rendered along the links and is quite configurable,

There is only one node label and although it is a separate SVG text element, you don't seem to have enough control over it. Using the label style the best I could achieve is to use CSS text alignment properties ('text-anchor': 'middle','dominant-baseline': 'text-after-edge')to place it at the top of the node and then to shrink the node radius down to 5. This is basically as close as I can get to the traditional D3 graph where you have complete positional control over the label.

Still interested if there are better ways but hope this helps people.

Peter Rogers
  • 41
  • 2