Resizing SVG

[Kade-Powell]

Hello, I have a need to resize the svg to fit whatever container size it is in. I don't see that option in the config attribute. i see it is hard set in the source code and then it looks like it gets overwritten by getBoundingClientRect() in src/components/background/VBackgroundGrid.vue

am i missing how to use this correctly? any help is appreciated

[Kade-Powell]

So now looking it seems you could solve this issue by setting height and width in the background and related components to 100% and then you could set specific sizes with a container element.

[dash14]

Hi @Kade-Powell, Yes, that's right. v-network-graph sets height to 100%, so if you add position: relative; to the parent element's style, it will fit the size of the parent element. However, this is confusing, so I changed that the size can be specified directly on the component. (Please check version v0.5.17)

An example is shown below.

<!-- App.vue -->
<script setup lang="ts">
import { defineConfigs, Edges, Nodes } from "v-network-graph";

const nodes: Nodes = {
  node0: { name: "Node 0" },
  node1: { name: "Node 1" },
  node2: { name: "Node 2" },
  node3: { name: "Node 3" },
};

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

const configs = defineConfigs({
  node: {
    selectable: true,
  },
});
</script>

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

<style scoped lang="scss">
.graph {
  border: 1px solid #888;
  width: 600px;
  height: 400px;
  margin: 0 auto;
}
</style>

[Kade-Powell]

Hello @dash14, thanks for the reply. I'm still having some trouble. applying the class to v-network-graph element doesn't seem to have the intended effect

what i need to set it the width and height attributes on the SVG element <svg class="v-canvas show" width="500" height="500" data-v-1046feca="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" style="overflow: hidden; "></svg>

My component code is below:

<!-- MyGraph.vue -->
<template>
        <v-network-graph
            class="q-mx-xl shadow-2 col bg-blue-grey-10 graph"
            :nodes="nodes"
            :edges="edges"
            :configs="configs"
        />

</template>

<script>
import { VNetworkGraph, defineConfigs } from 'v-network-graph'
export default {
  name: 'ServiceGraph',
  components: { VNetworkGraph },
  data () {
    return {
      edges: {
        edge1: { source: 'node1', target: 'node2' },
        edge2: { source: 'node2', target: 'node3' },
        edge3: { source: 'node3', target: 'node4' }
      },
      nodes: {
        node1: { name: 'Node 1' },
        node2: { name: 'Node 2' },
        node3: { name: 'Node 3' },
        node4: { name: 'Node 4' }
      },
      configs: defineConfigs({}),
      //configs omitted for brevity
    }
  }

}
</script>
<style scoped lang="scss">

.graph {
  border: 1px;
  border-style: solid;
  border-color: $positive;
  width: 700px;
  height: 500px;
  margin: 0 auto;
}
</style>

[dash14]

Hi @Kade-Powell, I ran the code you presented and could not reproduce this problem in my environment. The width and height of the <svg> elements are overridden by the values specified in the stylesheet essentially, which may also have something to do with what is specified outside of MyGraph.vue. If possible, could you upload the minimal set of projects where the problem occurs to CodeSandbox or a Git repository? Please also inform what browser and its version you are using.

Best Regards,

[Kade-Powell]

Hello i was able to fix my issue by setting the v-canvas class in my containing component.

[dash14]

Hi @Kade-Powell, Thank you for your reply. Perhaps the following import style.css line is missing in main.ts?

import VNetworkGraph from "v-network-graph";
import "v-network-graph/lib/style.css";  // ⭐ 

For more information, please see here.

Best Regards,