How to edit the graph size?

[mt324010]

I tried the sample code and only got a small graph .... Fresh to frontend codes, can someone helps?

[dash14]

Hi @mt324010, Since v-network-graph matches the parent container size, please try to specify the size externally. An example is shown below. I would also like to add a supplement to the example in Getting Started. Thank you for your question.

<script setup lang="ts">
const nodes = {
  node1: { name: "Node 1" },
  node2: { name: "Node 2" },
  node3: { name: "Node 3" },
  node4: { name: "Node 4" },
}

const edges = {
  edge1: { source: "node1", target: "node2" },
  edge2: { source: "node2", target: "node3" },
  edge3: { source: "node3", target: "node4" },
}

const layouts = {
  nodes: {
    node1: { x: 0, y: 0 },
    node2: { x: 50, y: 50 },
    node3: { x: 100, y: 0 },
    node4: { x: 150, y: 50 },
  },
}
</script>

<template>
<div class="graph">
  <v-network-graph
    :nodes="nodes"
    :edges="edges"
    :layouts="layouts"
  />
</div>
</template>

<style>
.graph {
  width: 800px;
  height: 600px;
  border: 1px solid #000;
}
</style>

[dash14]

Starting from v0.6.7, the display size can be directly specified by css in v-network-graph. An example code is shown below, and the same code is also available in Getting Started.

<script setup lang="ts">
  const nodes = {
    node1: { name: "Node 1" },
    node2: { name: "Node 2" },
    node3: { name: "Node 3" },
    node4: { name: "Node 4" },
  }

  const edges = {
    edge1: { source: "node1", target: "node2" },
    edge2: { source: "node2", target: "node3" },
    edge3: { source: "node3", target: "node4" },
  }
</script>

<template>
  <v-network-graph
    class="graph"
    :nodes="nodes"
    :edges="edges"
  />
</template>

<style>
.graph {
  width: 800px;
  height: 600px;
  border: 1px solid #000;
}
</style>

[dash14]

I close this issue for now. If you have any questions, please re-open this or open a new issue.