relation-graph一个vue关系图谱组件的使用

这篇具有很好参考价值的文章主要介绍了relation-graph一个vue关系图谱组件的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、relation-graph简介

一个Vue的关系图谱组件,使用非常方便

二、使用步骤

引入relation-graph

npm install --save relation-graph

三、参数配置

1.Graph 图谱

配置图谱的一些默认样式,工具栏等

代码如下(示例):

graphOptions: {
        // debug: true,
        // 禁用拖拽
        disableDragNode: true,
        // backgrounImage: 'http://ai-mark.cn/images/ai-mark-desc.png',
        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',
            // 如果此选项有值,则优先级高于上面那4个选项
            levelDistance: '',
          },
        ],
        // 箭头样式
        defaultLineMarker: {
          markerWidth: '0',
          markerHeight: '0',
          refX: '0',
          refY: '0',
        },
        defaultExpandHolderPosition: 'right',
        defaultNodeShape: 1,
        defaultNodeWidth: '100', // 节点宽度
        defaultLineShape: 4, //线条样式
        defaultJunctionPoint: 'lr',
        defaultNodeBorderWidth: 0,
        defaultLineColor: 'rgba(0, 186, 189, 1)',
        defaultNodeColor: 'rgba(0, 206, 209, 1)',
      },

2.Node 节点

nodes: [
          { id: 'N1', text: '深圳市腾讯计算机系统有限公司', color: '#2E4E8F' },
          { id: 'N15', text: '腾讯影业文化传播有限公司', color: '#4ea2f0' },
          {
            id: 'N16',
            color: '#4ea2f0',
            html: `<div class="A">
                    <div class="A-1">${this.A.title}</div>
                    <div class="A-2">${this.A.name}</div>
                  </div>
                  <div class="TIME">
                    <div>${this.A.date}</div>
                    <div>${this.A.date2}</div>
                  </div>`,
          },
          {
            id: 'N17',
            text: '苍穹互娱(天津)文化传播有限公司',
            color: '#4ea2f0',
          },
          { id: 'N18', text: '北京腾讯影业有限公司', color: '#4ea2f0' },
          { id: 'N19', text: '霍尔果斯腾影影视发行有限公司', color: '#4ea2f0' },
        ],

3.Link 关系

links是指节点之间的关系(link),图谱会根据这些关系来生成线条(Line)

  links: [
          { from: 'N1', to: 'N15' },
          { from: 'N15', to: 'N16' },
          { from: 'N15', to: 'N17' },
          { from: 'N15', to: 'N18' },
          { from: 'N15', to: 'N19' },
        ],

总结

先上图
relation-graph,view,js,relation-graph,vue.js,javascript,前端

2、主要代码文章来源地址https://www.toymoban.com/news/detail-580360.html

<template>
  <div>
    <div v-loading="g_loading" style="width: calc(100% - 10px);height:100vh;">
      <SeeksRelationGraph ref="seeksRelationGraph" :options="graphOptions" />
    </div>
  </div>
</template>

<script>
import SeeksRelationGraph from 'relation-graph';
export default {
  name: 'SeeksRelationGraphDemo',
  components: { SeeksRelationGraph },
  data() {
    return {
      g_loading: true,
      demoname: '---',
      graphOptions: {
        // debug: true,
        // 禁用拖拽
        disableDragNode: true,
        // backgrounImage: 'http://ai-mark.cn/images/ai-mark-desc.png',
        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',
            // 如果此选项有值,则优先级高于上面那4个选项
            levelDistance: '',
          },
        ],
        // 箭头样式
        defaultLineMarker: {
          markerWidth: '0',
          markerHeight: '0',
          refX: '0',
          refY: '0',
        },
        defaultExpandHolderPosition: 'right',
        defaultNodeShape: 1,
        defaultNodeWidth: '100', // 节点宽度
        defaultLineShape: 4, //线条样式
        defaultJunctionPoint: 'lr',
        defaultNodeBorderWidth: 0,
        defaultLineColor: 'rgba(0, 186, 189, 1)',
        defaultNodeColor: 'rgba(0, 206, 209, 1)',
      },
      A: {
        name: '文化传播有限公司',
        title: '霍尔果斯晓腾影业',
        date: '2022-10-12',
        date2: '11:39',
      },
    };
  },
  mounted() {
    this.setGraphData();
  },
  methods: {
    setGraphData() {
      var __graph_json_data = {
        rootId: 'N1',
        nodes: [
          { id: 'N1', text: '深圳市腾讯计算机系统有限公司', color: '#2E4E8F' },
          { id: 'N15', text: '腾讯影业文化传播有限公司', color: '#4ea2f0' },
          {
            id: 'N16',
            color: '#4ea2f0',
            html: `<div class="A">
                    <div class="A-1">${this.A.title}</div>
                    <div class="A-2">${this.A.name}</div>
                  </div>
                  <div class="TIME">
                    <div>${this.A.date}</div>
                    <div>${this.A.date2}</div>
                  </div>`,
          },
          {
            id: 'N17',
            text: '苍穹互娱(天津)文化传播有限公司',
            color: '#4ea2f0',
          },
          { id: 'N18', text: '北京腾讯影业有限公司', color: '#4ea2f0' },
          { id: 'N19', text: '霍尔果斯腾影影视发行有限公司', color: '#4ea2f0' },
        ],
        links: [
          { from: 'N1', to: 'N15' },
          { from: 'N15', to: 'N16' },
          { from: 'N15', to: 'N17' },
          { from: 'N15', to: 'N18' },
          { from: 'N15', to: 'N19' },
        ],
      };

      this.g_loading = false;
      this.$refs.seeksRelationGraph.setJsonData(
        __graph_json_data,
        (seeksRGGraph) => {
          // 这些写上当图谱初始化完成后需要执行的代码
        }
      );
    },
  },
};
</script>

<style lang="scss">
.TIME {
  font-size: 12px;
  color: red;
  display: flex;
  justify-content: space-around;
}
.A {
  border: 1px solid #ccc;
  .A-1 {
    border-bottom: 1px solid #ccc;
    padding: 5px;
  }
  .A-2 {
    padding: 5px;
    background-color: aqua;
  }
}
</style>

到了这里,关于relation-graph一个vue关系图谱组件的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 知识图谱(Knowledge Graph)根本概念

    目录 知识图谱 定义 基础概念: 知识图谱构建的关键技术 知识图谱的构建 实体命名识别 知识抽取 实体统一 指代消解 知识图谱的存储 RDF和图数据库的主要特点区别 知识图谱能干什么 反欺诈 不一致性验证 客户失联管理 知识推理 常见图数据库 2012年5月17日,Google 正式提出

    2024年02月13日
    浏览(37)
  • Relation-Aware Graph Transformer for SQL-to-Text Generation

    SQL2Text 是一项将 SQL 查询映射到相应的自然语言问题的任务。之前的工作将 SQL 表示为稀疏图,并利用 graph-to-sequence 模型来生成问题,其中每个节点只能与 k 跳节点通信。由于无法捕获长期且缺乏特定于 SQL 的关系,这样的模型在适应更复杂的 SQL 查询时将会退化。为了解决这

    2024年01月17日
    浏览(51)
  • 论文阅读《ICDE2023:Relational Message Passing for Fully Inductive Knowledge Graph Completion》

    论文链接 工作简介 在知识图谱补全 (KGC) 中,预测涉及新兴实体和 / 或关系的三元组, 这是在学习 KG 嵌入时看不到的,已成为一个关键挑战。 带有消息传递的子图推理是一个很有前途和流行的解决方案。 最近的一些方法已经取得了很好的性能,但它们 (1) 通常只能预测单独

    2024年02月07日
    浏览(41)
  • 【论文阅读】Relation-Aware Graph Transformer for SQL-to-Text Generation

    SQL2Text 是一项将 SQL 查询映射到相应的自然语言问题的任务。之前的工作将 SQL 表示为稀疏图,并利用 graph-to-sequence 模型来生成问题,其中每个节点只能与 k 跳节点通信。由于无法捕获长期且缺乏特定于 SQL 的关系,这样的模型在适应更复杂的 SQL 查询时将会退化。为了解决这

    2024年02月20日
    浏览(49)
  • 时空知识图谱研究进展与展望Spatiotemporal Knowledge Graph

    时空知识图谱研究进展与展望 时空知识图谱研究进展与展望 陆锋1, 2, 4, 5, *,  诸云强1, 2, 4,  张雪英3, 4 作者信息  + Spatiotemporal Knowledge Graph: Advances and Perspectives LU Feng1, 2, 4, 5, *,  ZHU Yunqiang1, 2, 4,  ZHANG Xueying3, 4 Author information  + 文章历史  + 摘要 地理信息 的不断泛

    2024年04月22日
    浏览(42)
  • 【前端可视化】3d-force-graph 3d力导向图(知识图谱相关)配置和使用

    可以先去官网看看文档或者看看我下面的参考博客,把基本配置看懂(英语差的同学可以看下面的翻译)。3d-force-graph使用及相关设置github.com/vasturiano/3d-force-graph3d-force-graph:文档翻译 3D知识图谱可视化3d-force-graph示例学习记录在Vue中使用3d-force-graph渲染neo4j图谱

    2024年02月08日
    浏览(48)
  • 中文人物关系知识图谱(含码源):中文人物关系图谱构建、数据回标、基于远程监督人物关系抽取、知识问答等应用.

    项目设计集合(人工智能方向):助力新人快速实战掌握技能、自主完成项目设计升级,提升自身的硬实力(不仅限NLP、知识图谱、计算机视觉等领域) :汇总有意义的项目设计集合,助力新人快速实战掌握技能,助力用户更好利用 CSDN 平台,自主完成项目设计升级,提升自

    2024年02月15日
    浏览(48)
  • Django中使用反向关系名称(related_name)解决由“多对多”关系引起的字段名字冲突问题引起的迁移命令报错。

    当在模型中为关系字段添加了 related_name 参数后,您可以使用该参数指定的名称来引用反向关系。下面是一个简单的例子来说明如何引用反向关系。 假设您有以下两个模型: 在上面的例子中, Book 模型有一个外键字段 author ,它关联到 Author 模型。通过添加 related_name=\\\'books\\\' 参

    2024年02月16日
    浏览(47)
  • [实体关系抽取|顶刊论文]OneRel:Relational Triple Extraction: One Step is Enough

    2022.5.11 |IJCAI-2022|华中科技大学|2022年SOTA| 原文链接 过去的步骤: 寻找头尾实体的边界位置(实体识别) 将特定令牌串联成三元组(关系分类) 存在误差累计问题,每个实体边界识别误差会累积到最终的组合三元组中 论文中的方法: 先通过枚举句子中的令牌序列生成

    2024年02月12日
    浏览(53)
  • vue前端开发自学,祖孙多层级组件嵌套关系数据传输

    vue前端开发自学,祖孙多层级组件嵌套关系数据传输!官方提供了一个解决方案,就是,在根组件内使用provide,哪个子孙组件想调用这个数据,就可以inject接收就行了。虽然是方便了,但是这个有点要求,就是只能自上而下的传递。不能反过来(不能子孙给根节点!) 如图,根

    2024年01月17日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包