vue2关系图Relation Graph

smallbench

已于 2024-07-02 14:14:24 修改

阅读量1.1k

点赞数 5

CC 4.0 BY-SA版权

文章标签： vue.js 前端

于 2024-07-02 13:51:24 首次发布

本文链接：https://blog.csdn.net/smallbench/article/details/140124500

https://relation-graph.com/#/index

Relation Graph 介绍

Relation Graph 是一种用于表示实体间关系的图形模型，它将复杂的实体关系可视化，使得人们能够更直观地理解实体之间的联系。在数据科学、数据库设计、人工智能、社会网络分析等多个领域有着广泛的应用。Relation Graph 可以表示一对多、多对一、多对多等各种关系，它通过节点（代表实体）和边（代表关系）来构建图形结构。

优点

1. 可视化表达：Relation Graph 通过图形的方式直观地展示了数据之间的复杂关系，使信息更容易被理解和记忆。

2. 模式识别：通过图形结构，可以更容易地发现数据中的模式、趋势和异常，有助于数据分析和决策制定。

3. 易于扩展：随着数据的增加或变化，只需添加新的节点或修改已有边即可更新图形，保持数据的实时性和准确性。

4. 促进沟通：图形化的展示方式便于团队成员间的交流和讨论，尤其是在跨部门协作时。

5. 灵活分析：支持多种分析方法，如路径分析、聚类分析、中心度分析等，满足不同场景下的需求。

缺点

1. 复杂度管理：当实体和关系数量庞大时，图形可能变得非常复杂，难以阅读和理解。此时，可能需要采用层级结构、过滤器或其他辅助手段来简化视图。

2. 数据更新挑战：维护大量动态连接的数据可能会带来性能和更新挑战，尤其是在实时数据流的场景下。

3. 视觉误导：虽然图形化展示直观，但过度依赖图形可能导致对复杂关系的误解。正确的解读往往需要深入的专业知识和分析技能。

4. 技术要求：构建和维护 Relation Graph 需要一定的技术能力，包括数据建模、图形界面设计和交互设计等方面的知识。

5. 隐私和安全问题：在涉及个人隐私或敏感数据的应用中，图形化的展示方式可能带来额外的隐私和安全风险。

总的来说，Relation Graph 是一种强大的工具，特别是在处理复杂、关联性强的数据时，但在应用时也需要考虑到其固有的限制和挑战。

示例

//下载npm install --save relation-graph


npm install --save relation-graph

在main.js引入，就不用局部引入

import RelationGraph from 'relation-graph';


Vue.use(RelationGraph);

随意创建的vue文件

<template>
  <div style="">
    <!-- 这个示例中，调用setJsonData时传递的是一个典型的有层级结构的数据，图谱会自动识别（通过children属性识别子节点），再将其做扁平化处理。这样做仅仅是为了方便展示一些树状图谱。 -->
    <!-- 直接使用tree数据结构有明显的确缺陷：只能设置全局的线条默认样式，无法对具体的link设置属性，不能精细化的定义线条的样式。 -->
    <div
      v-loading="g_loading"
      style="width: calc(100% - 10px);height:calc(100vh - 140px);border-top: #efefef solid 1px;"
    >
      <RelationGraph
        ref="seeksRelationGraph"
        :options="graphOptions"
      />
    </div>
    <el-button
      type="success"
      class="c-show-code-button"
    >
      <el-link
        href="https://github.com/seeksdream/relation-graph/blob/master/examples/views/seeks-graph-docs/demo/Demo4TreeData.vue"
        target="_blank"
        style="color: #ffffff;"
      >
        查看代码
      </el-link>
    </el-button>
  </div>
</template>

<script>
// 如果您没有在main.js文件中使用Vue.use(RelationGraph); 就需要使用下面这一行代码来引入relation-graph
// import RelationGraph from 'relation-graph';

export default {
  name: 'SeeksRelationGraphDemo',
  components: { },
  data() {
    return {
      g_loading: true,
      demoname: '---',
      graphOptions: {
        debug: true,
        'backgrounImage': 'https://camo.githubusercontent.com/ede1654f055903cdc39044129d15d5b158f4f3b33ba5b7c21c7407792a506dea/687474703a2f2f72656c6174696f6e2d67726170682e636f6d2f776562736974652f6c6f676f',
        'backgrounImageNoRepeat': true,
        'layouts': [
          {
            'label': '中心',
            'layoutName': 'tree',
            'layoutClassName': 'seeks-layout-center',
            'defaultJunctionPoint': 'border',
            'defaultNodeShape': 0,
            'defaultLineShape': 1,
            'from': 'left',
            // 通过这4个属性来调整 tree-层级距离&节点距离
            'min_per_width': '200',
            'max_per_width': '500',
            'min_per_height': '40',
            'max_per_height': '60',
            'levelDistance': '' // 如果此选项有值，则优先级高于上面那4个选项
          }
        ],
        'defaultExpandHolderPosition': 'right',
        'defaultNodeShape': 1,
        'defaultNodeWidth': '100',
        'defaultLineShape': 4,
        'defaultJunctionPoint': 'lr',
        'defaultNodeBorderWidth': 0,
        'defaultLineColor': 'rgba(0, 186, 189, 1)',
        'defaultNodeColor': 'rgba(0, 206, 209, 1)'
      }
    };
  },
  created() {
  },
  mounted() {
    this.demoname = this.$route.params.demoname;
    this.setGraphData();
  },
  methods: {
    setGraphData() {
      // 使用要点：通过节点属性expandHolderPosition: 'right' 和 expanded: false 可以让节点在没有子节点的情况下展示一个"展开"按钮
      //         通过onNodeExpand事件监听节点，在被展开的时候有选择的去从后台获取数据，如果已经从后台加载过数据，则让当前图谱根据当前的节点重新布局
      const __graph_json_data = {
        'rootId': 'a',
        'nodes': [
          {
            'id': 'a', 'text': 'a', 'children': [
              {
                'id': 'b', 'text': 'b', 'children': [
                  {
                    'id': 'b1', 'text': 'b1', 'children': [
                      { 'id': 'b1-1', 'text': 'b1-1' },
                      { 'id': 'b1-2', 'text': 'b1-2' },
                      { 'id': 'b1-3', 'text': 'b1-3' },
                      { 'id': 'b1-4', 'text': 'b1-4' },
                      { 'id': 'b1-5', 'text': 'b1-5' },
                      { 'id': 'b1-6', 'text': 'b1-6' }
                    ]
                  },
                  {
                    'id': 'b2', 'text': 'b2', 'children': [
                      { 'id': 'b2-1', 'text': 'b2-1' },
                      { 'id': 'b2-2', 'text': 'b2-2' }
                    ]
                  }
                ]
              },
              {
                'id': 'c', 'text': 'c', 'children': [
                  { 'id': 'c1', 'text': 'c1' },
                  { 'id': 'c2', 'text': 'c2' },
                  { 'id': 'c3', 'text': 'c3' }
                ]
              }
            ]
          }
        ],
        'lines': [
          // 你仍然可以通过常规方式添加关系
        ]
      };
      console.log(JSON.stringify(__graph_json_data));
      this.g_loading = false;
      this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (graphInstance) => {
        // 这些写上当图谱初始化完成后需要执行的代码
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

示例图