Chris
Hello,
I would like to implement external labels to the Halo visualization, similar to the below link:
http://bl.ocks.org/dbuezas/9306799
This doesn’t seem like it should be too complicated. I believe I want to:
1) Resize the circle in the draw area so that there is space for the text+lines.
2) Add label text and polylines to the example.css file (or html?)
3) Add svg draw elements (text + polyline) to halo_test.js initialize() function.
Do you see any other issues with the proposal?
– Does the vizuly library support externally drawn labels or should I use D3 native svg drawing? (Perhaps an API spec?)
– Lastly, if instead of a ribbon between the nodes and arc, I want to use a straight line of fixed width, can I still use vizuly’s linkout/linkover and just do the drawing with a custom SVG input?
Thank you for your time.
vizuly
Hello Chris,
The easiest way to do what you are proposing to modify the source component code for the Halo component, which can be found in the src/viz/halo.js file. Make sure to follow the steps in our docs about uncommenting out the debug files so you are referencing the source component from your html page versus a minified version.
The function you will want to look at is the update() function. This is where all of the geometries are added and manipulated. The measure() function is also something you may want to look at – as it is responsible for setting measurement variables for subsequent layouts.
These components are designed so it shouldn’t be too difficult for an experienced Javascript developer familiar with D3 to modify them like you propose.
I hope that helps point you in the right direction.
Cheers,
Tom
