关于D3.js 力导向图V3和V4节点固定
来源:互联网 发布:mt4数据导出系统 编辑:程序博客网 时间:2024/05/20 00:52
记录一点碰到的问题和解决方案。感觉国内关于D3.js 4.0版本的相关资料还是少。
力导向图布局
D3一种布局的方式,可以将你nodes links的节点数据转换成可以绘制的坐标点数据,然后通过svg展现出来,画拓扑图中用到。
通过fixed属性来固定节点
https://bl.ocks.org/mbostock/...
上面作者的demo(d3.js v4)。
力导向图的几个特征
节点之间的相互作用力的存在 所以节点不能重合,然后节点拖拽的过程中会影响到其他的节点
拖拽的过程 节点之间的线段长度不变,会会弹回去
但是对于拓扑图来说,这两点会有问题,并不需要这样的体验,简单来说,节点固定后,拖拽不影响其他节点的位置,节点拖拽链路长度要变动。
找了个作者的demo
sticky force layout
这是D3.js v3版本的实现方法
主要方法就是将节点数据
d.fixed = true;
一开始没有仔细看v4版本的API 想当然以为也是这样去做的,尝试了好久没成功。
v4版本的api对fixed节点的规定是 如果节点数据(d) 有fx fy两个值不为null,那么就是固定节点,unfix固定节点的方法就是 设置fx fy=null。
To fix a node in a given position, you may specify two additional properties:
fx - the node’s fixed x-position
fy - the node’s fixed y-position
At the end of each tick, after the application of any forces, a node with a defined node.fx has node.x reset to this value and node.vx set to zero; likewise, a node with a defined node.fy has node.y reset to this value and node.vy set to zero. To unfix a node that was previously fixed, set node.fx and node.fy to null, or delete these properties.
simulation_nodes
v4版本
http://codepen.io/jingxiao/pe...
其他
D3.js 3.x和4.x版本api改动真心大,也没有很多相关资料,还是要多看api吧
- 关于D3.js 力导向图V3和V4节点固定
- D3.V3.js数据可视化 -- 力导向图之图片和提示
- D3.js实现力导向图(Dray和Zoom)
- d3.js之力导向图
- d3.js力导向图节点间多连接线对称绘制
- d3.js力导向图节点间多连接线对称绘制
- d3 力导向图
- D3.js pie v3 VS v4
- 【D3.js数据可视化系列教程】(三十三)-- 力导向图之图片和提示
- 数据可视化 D3.js实现力导向图之二(node带文字说明和提示)
- 【d3.js教程06】force 力导向图
- d3画力导向图
- 数据可视化 D3.js实现力导向图之一(实现按指定字段确定link的source和target)
- D3 force(力导向图)研究之二:如何布局超过十万个节点的图谱
- D3学习:力导向图布局
- D3 笔记十:力导向图
- D3.js Array V4
- D3.js V4 : scale
- java 重载 多个方法的调用顺序
- 一个初学者对于MVC架构的理解
- 02-远程连接并且备份数据库postgresql
- 记一次平台服务没起来
- 一次完整的HTTP事务是怎样一个过程?
- 关于D3.js 力导向图V3和V4节点固定
- python爬虫 爬教务管理-test未完
- Core Java - 流(Stream) - 字节流和字符流(一)
- RunLoop 总结:RunLoop的应用场景(二)
- 带表情的评论
- 封装
- ORACLE——ROWNUM解析(使用ROWNUM大于条件,无法得到任何查询结果)
- 润乾填报页面导入excel后增加js动作
- 微信小程序支付官方文档