人物关系图谱插件

最新推荐文章于 2025-04-07 08:06:58 发布

山重水复疑无路

最新推荐文章于 2025-04-07 08:06:58 发布

阅读量1.8k

点赞数 1

分类专栏：学习文章标签： javascript vscode vue

原文链接：https://www.jianshu.com/p/b1a2bd3a03cd

版权

学习专栏收录该内容

8 篇文章

订阅专栏

这是一个使用Vue编写的示例，展示如何创建和操作一个关系图谱组件。代码中定义了`graphOptions`以配置图谱，并设置了节点和链接的数据。当节点或线条被点击时，会触发回调函数进行相应操作。此组件可用于展示人物或其他实体之间的关系。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<script>
    import RelationGraph from 'relation-graph'
    export default {
        name: 'Demo',
        components: { RelationGraph },
        data() {
            return {
            graphOptions: {
                allowSwitchLineShape: true,
                allowSwitchJunctionPoint: true,
                defaultJunctionPoint: 'border'
                // 这里可以参考"Graph 图谱"中的参数进行设置
            }
            }
        },
        mounted() {
            this.showSeeksGraph()
        },
        methods: {
            showSeeksGraph() {
            var __graph_json_data = {
                rootId: 'a',
                nodes: [
                { id: 'a', text: 'A', borderColor: 'yellow' },
                { id: 'b', text: 'B', color: '#43a2f1', fontColor: 'yellow' },
                { id: 'c', text: 'C', nodeShape: 1, width: 80, height: 60 },
                ],
                links: [
                { from: 'a', to: 'b', text: '关系1', color: '#43a2f1' },
                { from: 'a', to: 'c', text: '关系2' },
                { from: 'b', to: 'c', text: '关系3' },
                ]
            }
            // 以上数据中的node和link可以参考"Node节点"和"Link关系"中的参数进行配置 
            this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, () => {
                // Called when the relation-graph is completed 
            })
            },
            onNodeClick(nodeObject) {
            console.log('onNodeClick:', nodeObject)
            },
            onLineClick(lineObject) {
            console.log('onLineClick:', lineObject)
            }
        }
    }
</script>

官网relation-graph:一个vue关系图谱组件

原网站【使用vue实现的人物关系图谱 - 简书