Closed mt324010 closed 1 year ago
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>
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>
I close this issue for now. If you have any questions, please re-open this or open a new issue.
I tried the sample code and only got a small graph .... Fresh to frontend codes, can someone helps?