Add custom layer to v-network-graph (Vue.js)

16 Views Asked by At

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?

0

There are 0 best solutions below