Forum Discussion
D3JSVisual separation between nodes
Hi there, I've two questions in one: I need to add a visual icon to the top of the arrow that separates two nodes, but first I need to give more space between these nodes, precisaly to make the arrow a little bit longer and put the new icon on top.
Is it possible to edit and do this?
Regards,
Daniel Bernal
Hello dbernal_007,
Yes, this is generally possible in D3.js.
To increase the distance between nodes, you'll need to adjust the parameters of your layout (for example, linkDistance in a force-directed graph or the node spacing settings in hierarchical/tree layouts). Increasing the spacing will make the connecting links/arrows longer.
Once you have sufficient space, you can place an icon on or near the link by:
- Adding an SVG element (image, circle, text, etc.) positioned at the midpoint of the link.
- Updating its position whenever the graph is rendered or refreshed.
- The exact implementation depends on which D3 layout you're using (force-directed, tree, sankey, network graph, etc.).
Could you share:
- The type of D3 visual you're using?
- A code snippet or screenshot of the current implementation?
That would help provide a more specific solution.
Best regards,
Omkar Shinde
Microsoft Fabric Enthusiast | Power BI Consultant
💡 If you found this response helpful, please consider giving it a Kudos.
✅ If this resolves your question, please mark it as the Accepted Solution to help others in the community.
2 Replies
Hello dbernal_007,
Yes, this is generally possible in D3.js.
To increase the distance between nodes, you'll need to adjust the parameters of your layout (for example, linkDistance in a force-directed graph or the node spacing settings in hierarchical/tree layouts). Increasing the spacing will make the connecting links/arrows longer.
Once you have sufficient space, you can place an icon on or near the link by:
- Adding an SVG element (image, circle, text, etc.) positioned at the midpoint of the link.
- Updating its position whenever the graph is rendered or refreshed.
- The exact implementation depends on which D3 layout you're using (force-directed, tree, sankey, network graph, etc.).
Could you share:
- The type of D3 visual you're using?
- A code snippet or screenshot of the current implementation?
That would help provide a more specific solution.
Best regards,
Omkar Shinde
Microsoft Fabric Enthusiast | Power BI Consultant
💡 If you found this response helpful, please consider giving it a Kudos.
✅ If this resolves your question, please mark it as the Accepted Solution to help others in the community.Hi Omkar_1712 , thanks for your answer. I found where the space between nodes must be setted up, the D3JS visualization in Power BI has an Edit option and there's the entire code that I didn't find before.
Thanks again
