Hi, love the examples in the documentation! I wonder whether the nod

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

import data in json format about v-network-graph HOT 2 CLOSED

dash14 commented on June 15, 2024

import data in json format

from v-network-graph.

Comments (2)

happylilem commented on June 15, 2024 1

It works, thank you very much! :)

from v-network-graph.

dash14 commented on June 15, 2024

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
      }
    }
  }
}