Implementing Force-Directed Graph with Vue3 and relation-graph for Visualizing Relationship Data

Online Example Link: https://www.relation-graph.com/#/demo/vue3?id=layout-force

Among various data visualization techniques, the Force-Directed Graph is a popular method, especially suitable for displaying complex relationship data. This article will detail how to use Vue3 and the relation-graph component library to create a dynamic Force-Directed Graph, enabling developers to effectively showcase network topology, social relationships, or any type of relationship data in web applications.

Project Setup and Dependency Installation

Before starting, ensure that Node.js and Vue3 are installed in your development environment. Next, install the relation-graph library in your project:

npm install relation-graph-vue3

This library provides powerful graph drawing capabilities and diverse layout options.

Component Configuration and Initialization

Import relation-graph in the Vue component and set up the basic graph configuration. We will use the "force" layout, which simulates forces of attraction and repulsion in physics to automatically optimize node positions for a more reasonable and aesthetically pleasing layout.

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import RelationGraph from 'relation-graph-vue3';
import type { RGOptions, RelationGraphComponent } from 'relation-graph-vue3';

const graphRef = ref<RelationGraphComponent | null>(null);

const graphOptions: RGOptions = {
    layout: { layoutName: 'force' },
    defaultNodeBorderWidth: 0,
    defaultLineShape: 1,
    defaultJunctionPoint: 'border'
};
</script>

Data Loading and Graph Rendering

A Force-Directed Graph typically consists of multiple nodes and edges connecting these nodes. We can simulate a simple network structure by defining nodes and lines:

const showGraph = async () => {
    const __graph_json_data = {
        nodes: [
            { id: 'a', text: 'Node A' },
            { id: 'b', text: 'Node B' },
            { id: 'c', text: 'Node C' },
            // More nodes...
        ],
        lines: [
            { from: 'a', to: 'b', text: 'Connection A-B' },
            { from: 'b', to: 'c', text: 'Connection B-C' },
            // More lines...
        ]
    };

    const graphInstance = graphRef.value?.getInstance();
    if (graphInstance) {
        await graphInstance.setJsonData(__graph_json_data);
        await graphInstance.moveToCenter();
        await graphInstance.zoomToFit();
    }
};

Enhancing Interactivity

To improve interactivity, we can add event listeners for node clicks and line clicks to display more detailed information or perform other interactive operations:

const onNodeClick = (node) => {
    console.log('Clicked node:', node.text);
};

const onLineClick = (line) => {
    console.log('Clicked line:', line.text);
};

Component Template

In the Vue template, utilize the RelationGraph component and its powerful features to render the graph:

<template>
  <div style="height:calc(100vh);">
    <RelationGraph ref="graphRef" :options="graphOptions" @node-click="onNodeClick" @line-click="onLineClick" />
  </div>
</template>

Conclusion

By using Vue3 and relation-graph, we can easily create a dynamic Force-Directed Graph to visualize relationship data. This type of graph not only offers visually appealing results but also significantly enhances data readability and interactivity. Whether in social network analysis, network topology, or any scenario requiring relationship representation, the Force-Directed Graph is a valuable tool.

relation-graph showcases impressive performance by supporting over 5000 nodes without using canvas but instead using div+css for full node content customization:
https://www.relation-graph.com/#/demo/vue2?id=layout-performance-test

The force layout allows customization of force parameters:
https://www.relation-graph.com/#/demo/vue2?id=layout-force-options

And complete customization of the Force-Directed Graph:
https://www.relation-graph.com/#/demo/vue2?id=customer-layout-force

More Resources:

• GitHub Repository
• Official Website
• Online Examples
• Documentation

Explore these resources and start using relation-graph to build your next project!