search

dash14 / v-network-graph

An interactive network graph visualization component for Vue 3
https://dash14.github.io/v-network-graph/
MIT License
485 stars 44 forks source link

Place marker in the middle of edge #67

Closed piliadis closed 2 years ago

piliadis commented 2 years ago

Hi there @dash14 and thank you for the awesome tool.

I'm trying to apply v-network-graph for electrical grid representation. The thing is that electrical grids involve 2 kinds of edges: lines and transformers. Thus I need to place a custom marker in the middle of the edge depending on its type. What is the cleanest way to implement this? Is it possible in this stage of the tool? I tried to split the edge into two segments and use marker-mid but had no luck, as I don't know how to preserve vue reactivity etc.

Thank you in advance, Cheers

dash14 commented 2 years ago

Hi @piliadis, Sorry for the late reply. There is no proper feature to achieve this, but it is possible to do so by applying the feature for displaying edge labels. Please check the example shown below. https://dash14.github.io/v-network-graph/examples/appearance.html#place-any-object-at-the-edge

I hope this helps you. Best Regards,

piliadis commented 2 years ago

Thank you for your reply. It was very helpful as I managed to achieve what I was aiming for. Keep up the good work! Regards