echarts关系图谱分析节点位置不动

已于 2024-01-07 06:35:53 修改
阅读量1.3k 收藏 6
点赞数 1
文章标签： 前端 echarts
于 2023-03-17 12:00:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43239880/article/details/129617119
版权

背景需求：
因为项目中人物的关系比较多，所以需要根据某个人去推演出于其他人的关系，并且可以继续推演。
技术：echarts
难点： 1.后台不返回节点位置，需前端自己更新节点位置
2.在推演出数据之后，节点的位置不能发生改变
3.单个节点需要可以拖动并且记录位置
项目实现效果（基础版）：
图谱双击分析.gif

github源码地址：https://github.com/rui-rui-an/relationChart

更新：目前antv-g6也有类似效果的插件可用了，可以参考：
http://v.antfin.com/zh-cn/g6/3.x/demo/interaction/layout-force-expand.html

吃炸鸡的前端
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts关系图(力引导)拖动节点不还原位置
01-03
echarts关系图(力引导)拖动节点不还原位置,在init创建时第三个参数对象添加myOpts_:{draggableFixed_:true}即可,如: var mychart = echarts.init(dom,null,{myOpts_:{draggableFixed_:true}});创建一个拖动不还原的...
vue利用echarts简单实现具有中心节点的知识图谱代码
08-02
vue利用echarts简单实现具有中心节点的知识图谱，其中边缘节点可拖动，其大小可以根据传入的值而变化
Echarts关系图的配置项，一文全解，一目了然。
最新发布
贝格前端工场的博客
05-03 1275
ECharts 是一个由百度开发的开源可视化库，用于创建丰富的交互式数据可视化图表。关系图（Relationship Graph）是 ECharts 中的一种图表类型，用于展示节点之间的关系和连接。关系图通常用于展示复杂的网络结构，比如社交网络中的好友关系、组织结构中的人员关系、物流网络中的节点连接等。关系图由节点和边组成，节点代表网络中的实体，边代表节点之间的连接关系。
echarts 关系图 graph 节点图 动态设置x/y坐标
热门推荐
愿你走过半生，归来任是少年。
11-28 1万+
data: [ { name: 'Node 1', x: 300, y: 300 }, { name: 'Node 2', x: 800, y: 300 }, { name: 'Node 3', x: 550, y: 100 }, { name: 'Node 4', x: 550, y: 500 } ], // links: [], links: [ { source.
echarts关系图(graph) 节点拖拽无法固定解决办法
freedom_zzz的博客
07-01 9725
echarts关系图(graph) 节点拖拽无法固定解决办法 方法一：echarts 绑定 mouseup事件 //节点拖拽固定 myChart.on('mouseup', function (params) { var option = myChart.getOption(); option.series[0].data[p...
echarts关系图自定义节点坐标相互影响的问题
dbeidouxingf的博客
03-22 1593
解决echarts关系图节点间会互相影响，通过设置4个basepoint固定坐标轴范围
echarts关系图
m0_45827438的博客
05-09 2405
1.效果图 2.需求 1、大节点和小结点的颜色分开展示，大节点根据category来展示颜色，小结点默认灰色 小结点颜色：根据（graph里的【itemStyle】属性来单独给小结点设置颜色） itemStyle: { color: '#bbb' }, 2.force关系图可拖动子节点 series: [ { type: 'graph',//类型关系图 //关系图布局，'n
echarts3力引导布局，固定某节点
a_joshua的博客
12-05 4030
在data数组里设置  fixed: true, 官方文档
基于知识图谱的问答+echarts展示图谱.zip
03-15
在知识图谱中，实体作为节点，实体之间的各种语义关联则通过边进行连接，形成了一个庞大的数据网络。 知识图谱的核心价值在于其能够精确、直观地表示复杂世界中的知识，并支持高效的知识查询与推理。例如，在搜索...
echarts升级版关系图，网络拓扑图，资源关系图，可添加，搜索（支持高亮显示），排序，删除
11-19
总的来说，ECharts的升级版关系图、网络拓扑图和资源关系图为数据分析和可视化提供了一套强大且灵活的工具，无论是在科研、企业管理还是在日常的数据分析工作中，都能有效地帮助用户理解和展示复杂的数据关系。...
基于JavaScript的ECharts扩展示例（词云，水球图，烟花秀，关系图谱）
04-15
在ECharts中，关系图谱支持多种布局方式，如力导向布局、环形布局等，帮助用户理解和分析复杂的关系网络。此外，还可以添加节点和边的样式，实现动态交互，如拖拽节点、高亮路径等。 在使用这些示例时，你需要具备...
echarts关系图通过XY轴将节点定位到中心点
HandsomeGuy_的博客
06-11 7195
我的是没有用力导向的。是通过后台数据XY进行渲染图表的 将下面代码写在你的逻辑事件里面 比如点击事件、hover事件等等 将下面代码写在你的逻辑事件里面 比如点击事件、hover事件等等 将下面代码写在你的逻辑事件里面 比如点击事件、hover事件等等 将下面代码写在你的逻辑事件里面 比如点击事件、hover事件等等 将下面代码写在你的逻辑事件里面 比如点击事件、hover事件等等 **目前这个主要是针对通过后台给的XY渲染图表方式。具体的力导向方式可以在百度搜索 $.each('后台给的总数
Echarts5.* 关系图谱(relation graph)如何以某节点为圆心，子节点环绕其排列布局？
zwf193071的专栏
07-02 2659
在前一篇文章里我采用的方法是，随机生成坐标点，可这样会导致节点布局混乱，无法理清各个节点之间的关系。希望能做到如下的优化：后期的效果如下图所示：核心代码如下所示： 以父节点为圆心，将子节点等分并返回坐标信息 该方法如下所示： ，即每个子节点对应的角度 , 即每个子节点对应的弧度，得到该子节点与圆中心的方向偏移值，若需知道该子节点的坐标信息，则需加上圆心的值核心代码如下所示： 在上面代码中，我先从所有节点中过滤出，因为它是类型聚合点，再根据不同类型，......
echarts关系图配置详解
weixin_50885665的博客
07-08 6406
echarts关系图配置详解
echarts图位置调整
Node.js安装报错 - npm -v 查看版本无效
05-20 912
调整图形的位置： 折线图 在grid属性中 饼图 series中的center属性
echarts3关系图：力引导布局， 固定某些节点
weixin_30780649的博客
12-05 4139
在数组里设置 fixed: true,<a href='http://echarts.baidu.com/option.html#series-graph.data.fixed'>官方文档</a> 转载于:https://www.cnblogs.com/Tianbao/p/7985158.html
echarts树图的节点自定义图片，以及子节点挤在一起该怎么处理...
木得是的博客
08-19 2908
在长达三天尝试，根据图的要求，他居然选择了echarts的树图，这是为什么呢？让我们一起来看看...
echarts 关系图谱
06-10
ECharts 是百度开源的一款基于 JavaScript 的可视化图表库，支持包括折线图、柱状图、散点图、饼图、K 线图、地图等多种图表类型。而 ECharts 中的关系图谱则是指用于展示节点之间关系的图表类型。 关系图谱可以用于展示社交网络、组织架构、知识图谱等场景下的数据。ECharts 中的关系图谱支持多种布局算法，例如力引导布局、圆形布局、层次布局等，可以根据不同场景选择不同的布局算法展示数据。同时，ECharts 中的关系图谱也支持节点和边的多种样式设置，包括节点大小、颜色、标签、边的宽度、颜色以及箭头等属性。 总之，ECharts 中的关系图谱是一个功能强大、灵活性高的可视化图表类型，可以帮助用户直观地展示节点之间的关系。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值