import data in json format

[happylilem]

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!

[dash14]

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,

[happylilem]

It works, thank you very much! :)