D3JSVisual separation between nodes

[dbernal_007]

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

[dbernal_007]

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

[Omkar_1712 · Accepted solution]

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.