ChrisJuly 29, 2018 at 12:05 pm #11330
I would like to implement external labels to the Halo visualization, similar to the below link:
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.vizulyJuly 30, 2018 at 7:32 am #11350
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.jsfile. 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.
I hope that helps point you in the right direction.
Add external labels to halo arc + Ribbon options
© 2019 — vizuly.io