Is it possible to add a pannable background image?
jaderinoo opened this issue · comments
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>
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
Thanks for the tip! All seems to be good now.
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!