search

dash14 / v-network-graph

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

Is it possible to add a pannable background image? #127

Closed jaderinoo closed 10 months ago

jaderinoo commented 10 months ago

I'd like to have a background image, fetched by url, that we can pan around while panning the v-network-graph. Searching around d3 alludes me to believe that this should work. Any ideas?

<v-network-graph ref="vNGComp" class="graph" :event-handlers="eventHandlers" v-model:layouts="layouts"
    :configs="config" :nodes="nodes" :edges="edges" :layers="layers">
    <template #badge="{ scale }">
        <circle v-for="(pos, node) in layouts.nodes" :key="node" :cx="pos.x + 9 * scale" :cy="pos.y - 9 * scale"
            :r="4 * scale" :fill="nodes[node].active ? '#CD4468' : '#00cc0000'" style="pointer-events: none" />
    </template>
    <image :href="backgroundImageURL" /> <---- Is this correct?
</v-network-graph>
dash14 commented 10 months ago

Hi @jaderinoo, Sorry for the late reply. The following is an example of inserting an image tag as a layer in the background. https://dash14.github.io/v-network-graph/examples/layers.html#custom-layer

Best Regards

jaderinoo commented 10 months ago

Thanks for the tip! All seems to be good now.

mherb63 commented 6 months ago

Hi,

How could I modify your example to make it look like a badge (with dynamic background color and a dynamic number displayed in the circle).

Thanks!