Develop a relationship network display chart using Vue3.

Developing Relationship Network Visualization Chart with Vue3 and relation-graph

Example online link: https://www.relation-graph.com/#/demo/vue3?id=layout-center

In modern enterprise management and social network analysis, relationship network charts are highly effective visual tools that help us understand and analyze the relationships and interaction patterns between individuals. This article will introduce how to use Vue3 and the relation-graph library to build a dynamic personnel relationship network chart.

Project Setup and Dependencies

First, ensure that Vue3 is installed in your project. If you haven't installed relation-graph yet, you can quickly add it via npm:

npm install relation-graph-vue3

This library provides developers with powerful chart display capabilities, supporting various layouts and customization options.

Component Configuration

In the Vue component, import relation-graph and set up the necessary reactive reference:

<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);
</script>

Chart Options and Layout Settings

Using the graphOptions configuration object, we can define the appearance and behavior of the chart:

const graphOptions: RGOptions = {
    debug: true,
    defaultNodeColor: 'rgba(238, 178, 94, 1)',
    defaultLineShape: 1,
    layouts: [{ layoutName: 'center' }],
    defaultJunctionPoint: 'border'
};

Here, we have chosen the center layout (center), which is suitable for displaying complex network relationships such as social networks or organizational structures.

Data Loading and Chart Rendering

Chart data typically includes nodes (individuals) and lines (relationships):

const showGraph = async () => {
    const __graph_json_data = {
        rootId: '2',
        nodes: [
            { id: '1', text: 'Alice' },
            { id: '2', text: 'Bob' },
            // More nodes...
        ],
        lines: [
            { from: '1', to: '2', text: 'Colleague' },
            // More lines...
        ]
    };
    const graphInstance = graphRef.value?.getInstance();
    if (graphInstance) {
        await graphInstance.setJsonData(__graph_json_data);
        await graphInstance.moveToCenter();
        await graphInstance.zoomToFit();
    }
};

Enhancing Interactivity

We can also add event listeners to nodes and lines to respond to user clicks and display more information or perform other interactions:

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

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

Component Template

In the Vue template, we use the RelationGraph component to render the chart:

<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 build feature-rich, interactive personnel relationship network charts. These charts can be used not only to display social network analysis results but also for various scenarios such as team structure analysis and project management within organizations.

The center layout can be configured for hierarchical relationships:
https://www.relation-graph.com/#/demo/vue3?id=distance_coefficient

More Resources:

• GitHub Repository
• Official Website
• Online Examples
• Documentation

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