I'm using the v-network-graph library and Vue.js to visualize a network. Now I tried to follow the example from v-network-graph to include custom background layer. (e.g. a worldmap)
Even with the exact example code the browser logs the following error:
Uncaught SyntaxError: Identifier '\__vite__injectQuery' has already been declared (at ${mod.id}:55007:1)
<script setup lang="ts">
import { ref } from "vue"
import * as vNG from "v-network-graph"
import { withBase } from "vitepress"
import data from "./data"
// additional layers definition
const layers = {
// {layername}: {position}
worldmap: "base",
}
// ref="graph"
const graph = ref<vNG.Instance>()
function onLoadImage() {
graph.value?.fitToContents()
}
</script>
<template>
<v-network-graph ref="graph" :nodes="data.nodes" :edges="data.edges" :layouts="data.layouts" :configs="data.configs"
:layers="layers">
<!-- Additional layer -->
<template #worldmap>
<image :href="withBase('./background.svg')" x="0" y="0" width="1000px" @load="onLoadImage" />
</template>
</v-network-graph>
</template>
The expected behaviour would be that a custom svg is displayed as a background image. If I use other examples from the same site the network renders as expected.
Has anybody successfully recreated the said example using vue3?