使用html快速基于relation-graph实现关系图谱

已于 2023-09-14 15:35:49 修改
阅读量1.4k 收藏 4
点赞数 1
分类专栏： CSDN 百度 博客 文章标签： html 前端 javascript
于 2022-11-08 10:32:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SDDY_xiao/article/details/127745068
版权
本文介绍了一个基于relation-graph项目的关系图谱组件，该组件使用Vue编程方式开发，适用于前端框架。由于其特性，它无法在纯HTML环境中运行。为了帮助开发者快速实现关系图谱的可视化，提供了HTML模板和效果图。
摘要由CSDN通过智能技术生成

relation-graph项目使用典型的vue编程方式开发的组件。 涉及到组件挂载，其可视化实现需要基于Vue 前端框架，无法在纯html上使用。 网上迅速实现代码参考太少，故简单写个html使用模板供大家快速实现可视化。

配置： 
1. 需本地存在relation-graph.min.js文件。文件地址：“ https://gitee.com/xx-other/relation-graph/blob/master/dist/relation-graph.min.js ” 保存到本地
2. 需要vue (此例子使用版本v2.7.13)。 可线上依赖方式（https://cdn.jsdelivr.net/npm/vue/dist/vue.js），也可保存到本地引入

模版：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=3.0,user-scalable=yes">
    <title>relation-graph 模版html</title>
</head>

<body>
    <div id="app">
        <div style="height:calc(100vh - 50px);">
最低0.47元/天 解锁文章
SDDY_xiao
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html页面展示关系图,可拖拽的html5人物关系图代码
weixin_42510783的博客
06-05 2113
一款可拖拽的html5人物关系图代码，可以显示预设的人物头像、人物的关系等，可以鼠标拖拽来自由排列人物顺序，可以指定不同关系的连线样式。查看演示下载资源：33次 下载资源下载积分：20积分页面的body部分，设置好人物关系的canvas显示容器，代码如下： 页面的底部，需引入jQuery库和必要的JS文件，并设置好人物关系所有的显示内容，...
html关系图
11-20
html5、echart 、zrender 实现的关系图，可以拖动以及设置显示类别
relation-graph——实现右击节点显示详情+点击展开折叠操作——技能提升
yehaocheng520的博客
05-29 2999
relation-graph——实现右击节点显示详情+点击展开折叠操作——技能提升
vue插件——relation-graph——实现关系图功能——技能提升
yehaocheng520的博客
04-06 1万+
vue插件——relation-graph——实现关系图功能——技能提升
一文玩转【relation-graph 关系图谱】再也不怕遇到这样的需求
最新发布
小猿同学628的博客
07-09 1529
relation-graph是支持Vue2、Vue3、React的关系数据展示组件，支持通过【插槽】让使用者使用"普通HTML元素、Vue组件、React组件"来完全自定义图形元素，并提供实用的API接口让使用者轻松构建可交互的图形应用。
动态关系图（html，直接可以单独html运行），方便集成项目
热门推荐
qq_46906413的博客
04-17 1万+
🍖🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖 🍖🍖 🍖🍖🍖 🍖🍖🍖🍖 作者 ： 不良使 🍖🍖🍖🍖🍖 潜力创作新星 华为云享专家 🍖🍖🍖🍖🍖🍖 博客记录学习的思路，项目和错误,寻找志同道合的朋友 🍖🍖🍖🍖🍖🍖🍖 如果觉得有帮助记得一键三连 ┗|｀O′|┛ 嗷~~ 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖.
d3关系图谱.html
07-30
最近工作需要完成一个股权穿透图，找了好多文档发现都不满足需求，最终选择d3.js来实现，包含子集的收缩展开，交互以及其他功能。之前由于没做过类似关系图以及不了解d3，踩了很多坑，我会尽可能将代码描述清楚（毕竟花了两个大夜），建议提前了解svg的简单使用和运行机制，d3的基本使用。 使用d3不像其他图表，d3的使用自由度极大，因此可以完成绝大多数图表需求，时间充足的话，可以逐步完成代码，理解实现思路后做其他修改就很简单了。
html关系图数据可视化,可视化图表—网络关系图
weixin_32546235的博客
06-04 4202
描述也称为「网络地图」或「节点链路图」。这种图表使用节点/顶点和连接线来显示事物之间的连接关系，并帮助阐明一组实体之间的关系类型。这些节点通常是圆点或小圆圈，但也可以使用图标。节点之间的连接关系通常以简单的线条表示，但在某些网络图中，并非所有节点和连接都有相同属性，故可藉此显示其他变量，例如通过节点大小或连接线的粗幼来表示其与数值之间的比例。通过描绘出链路连接系统、查找任何节点集群、节点连接的密度...
bt php,bt.php · jiehu0992/家谱familytree - Gitee.com
weixin_42576804的博客
03-10 279
刘三才后裔刘氏家族族谱树* {margin: 0; padding: 0;}.tree{width:20000px; margin:40px auto 0 auto}.tree ul {padding-top: 20px; position: relative;transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: al...
relation-graph图谱移动端适配拖动修复代码
03-18
本话题聚焦于在移动端环境下，针对relation-graph图谱进行适配和拖动修复的代码实现。 在`vue`框架下，我们通常会利用其组件化的特性来构建关系图谱。`vue`提供了强大的响应式数据绑定和指令系统，可以方便地处理...
relation-graph-3d-force:关系图3D力
05-16
关系图3D力的实现原理主要基于力导向布局（Force Directed Graph）。这种布局算法模拟了物理系统中的引力和斥力，使得节点在网络中自然地分布开来，避免过度拥挤，同时保持了连接它们的边的合理性。3D效果的引入，则...
可拖拽的html5人物关系图代码
09-11
可拖拽的html5人物关系图代码可拖拽的html5人物关系图代码
HTML5层级关系组织结构图代码.zip
05-23
HTML5层级关系组织结构图代码，公司组织结构图。
[知识图谱实战篇] 七.HTML+D3实现关系图谱搜索功能（源码）
02-15
本文主要增加了一个搜索功能，通过该搜索框能展示搜索节点的相关内容，同时在张老师的基础上增加搜索节点相关联的边及节点。前面作者讲解了很多知识图谱原理知识，包括知识图谱相关技术、Neo4j绘制关系图谱等，但仍缺少一个系统全面的实例。为了加深自己对知识图谱构建的认识，为后续创建贵州旅游知识图谱打下基础，作者深入学习了张宏伦老师的网易云课程（星球系列电影），并结合自己的理解和技术分享了该系列专栏，从数据采集、数据展示、数据分析到知识图谱构建，文章后续还会讲解中文数据的实体识别、关系抽取、知识计算等。 --------------------- 作者：Eastmount 来源：CSDN 原文：https://blog.csdn.net/Eastmount/article/details/87270150 版权声明：本文为博主原创文章，转载请附上博文链接！
HTML5层级关系架构图代码
06-24
HTML5层级关系架构图代码是一款HTML5基于SVG绘制的公司组织架构图代码。
relation-graph:Vue 关联关系图谱组件，可以展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱，可提供多种图谱布局，包括树状布局、中心布局、力学布局自动布局等。Vue component for relationship graph , which can display knowledge graphs, such as organization graph, equity structure graph, group relationship graph,
04-22
relation-graph这是一个Vue关系图谱组件，可以展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱，可提供多种图谱布局，包括树状布局、中心布局、力学布局自动布局等。这个项目使用典型的vue编程方式，代码...
knowledge-graph-learning:精选的很棒的知识图谱教程，项目和社区列表
05-03
无论您使用哪种语言，都可以随意发表笔记。 知识图相关任务 ：从不同来源构造知识图 ：实体预测或链接预测 命名实体识别 基于本体的信息提取 关系提取 语义角色标签 其他无关的任务文件 标记任务 注解 共指解析 ...
关系图谱库 --- relation-graph
weixin_43777074的博客
09-13 1495
relation-graph官网地址 在官网中能看到一些基本的配置和方法，但是并不全面，有些东西可以去github上面的问题解答查看
vue3 relation-graph 实现线条悬浮框
03-30
Vue3 Relation Graph 是一个基于 Vue3 和 D3.js 的关系图谱组件库，可以用于展示和操作复杂的关系网络数据。它提供了丰富的功能和交互效果，其中包括实现线条悬浮框的功能。 要实现线条悬浮框，你可以按照以下步骤进行操作： 1. 安装依赖：首先，在你的 Vue 项目中安装 vue3-relation-graph 组件库。可以使用 npm 或者 yarn 进行安装。 2. 导入组件：在需要使用关系图谱的组件中，导入 vue3-relation-graph 组件。 ```javascript import { RelationGraph } from 'vue3-relation-graph'; ``` 3. 准备数据：准备好你的关系网络数据，包括节点和边的信息。可以根据你的需求，将数据存储在组件的 data 中或者从后端获取。 4. 使用组件：在模板中使用 RelationGraph 组件，并将准备好的数据传递给组件。 ```html <template> <RelationGraph :nodes="nodes" :edges="edges" /> </template> ``` 5. 自定义线条悬浮框：通过配置 RelationGraph 组件的 props，你可以自定义线条悬浮框的内容和样式。可以使用 slot 来自定义线条悬浮框的内容。 ```html <template> <RelationGraph :nodes="nodes" :edges="edges"> <template #edge-tooltip="{ edge }"> <div class="tooltip"> <p>{{ edge.label }}</p> <p>{{ edge.weight }}</p> </div> </template> </RelationGraph> </template> ``` 在上面的例子中，我们使用了一个名为 `edge-tooltip` 的 slot 来自定义线条悬浮框的内容。在这个 slot 中，我们可以访问到当前悬浮的边的信息，并根据需要进行展示。 这样，当用户将鼠标悬停在关系图谱的线条上时，就会显示自定义的线条悬浮框。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值