Closed happylilem closed 2 years ago
Hi @happylilem,
Thanks for taking a look! In v-network-graph, as long as the format of the object is the same as the type declaration, you can import and specify the JSON file directly. Here is a snippet:
App.vue
<script setup lang="ts">
import data from "./test-data.json";
</script>
<template>
<div class="graph">
<v-network-graph
:nodes="data.nodes"
:edges="data.edges"
:layouts="data.layouts"
:configs="data.configs"
/>
</div>
</template>
<style>
.graph {
border: 1px solid #888;
width: 600px;
height: 400px;
margin: 0 auto;
}
</style>
test-data.json
{
"nodes": {
"node1": { "name": "Node 1" },
"node2": { "name": "Node 2" },
"node3": { "name": "Node 3" },
"node4": { "name": "Node 4" }
},
"edges": {
"edge1": { "source": "node1", "target": "node2" },
"edge2": { "source": "node2", "target": "node3" },
"edge3": { "source": "node3", "target": "node4" }
},
"layouts": {
"nodes": {
"node1": { "x": 0, "y": 0 },
"node2": { "x": 70, "y": 70 },
"node3": { "x": 140, "y": 0 },
"node4": { "x": 210, "y": 70 }
}
},
"configs": {
"node": {
"normal": {
"radius": 20
}
}
}
}
I hope this will help. Kind Regards,
It works, thank you very much! :)
Hi, love the examples in the documentation!
I wonder whether the nodes and edges data have to be set up in a vue file as shown in the documentation, or it's possible to compose the graph by reading a JSON file? E.g.
import data from "./test-data.json"
If so, can you kindly throw me a brief snippet of how to get the imported file integrated in App.vue when doing
const nodes: Nodes = {}
? I'm very new to Vue and this library, so thank you in advance!