D3 force(力导向图)研究之一:完美融合拖拽与缩放
来源:互联网 发布:中易广告联盟源码 编辑:程序博客网 时间:2024/06/06 03:55
本文采用的d3版本为第四版,4.9.1
先看实例效果,见图1, 在对节点进行缩放后,依旧能够做到以下两点:
1. 拖拽依旧能够完美做到鼠标跟随与连接关系跟随;
2. 缩放拖拽后,节点的位置依旧正确,利于数据保存;
再看操作失败的例子,见图2。
对现象进行分析,我们可以发现:
1. 鼠标跟随无差异,拖拽操作正常;
2. 节点位置正常;
3. 连线的更新状态错误;
继续诊断,我们可以得出这样的结论:连线的端点数据更新错误。 于是很显然,我们需要对tick事件进行修改,核心代码如下:
// 更新连线的端点数据links.attr('x1', d => { // 首先判断节点数据是否进行了缩放操作 if(d.source.scale !== undefined) { // 计算节点的真实位置 let scale = d.source.scale || 1, tx = d.source.tx || 0, x = d.source.x, rx = x * scale + tx return rx } return d.source.x})// 其他更新y1、x2、y2的代码略
在上面的代码中,我们需要知道节点是否进行缩放,理所当然我们需要注册自定义的缩放事件,核心代码如下:
/** * data: 当前结点绑定的数据 * index:当前结点的索引顺序 * els:缩放操作绑定元素的集合 */function zoomHandler(data, index, els){ // 指向当前结点 var transform = d3.zoomTransform(this), scale = transform.k, tx = transform.x, ty = transform.y // 将缩放参数写入节点绑定的数据 data.scale = scale data.tx = tx data.ty = ty // 执行缩放操作 // 偏移量在前,缩放在后,千万注意transform操作的先后顺序 d3.select(this).attr("transform", transform)}
结论
理解力导向图、拖拽、缩放的核心事件是基础,熟练掌握SVG的transform机制才是关键。
阅读全文
0 0
- D3 force(力导向图)研究之一:完美融合拖拽与缩放
- D3 force(力导向图)研究之二:如何布局超过十万个节点的图谱
- 【d3.js教程06】force 力导向图
- d3 力导向图
- d3画力导向图
- D3学习:力导向图布局
- d3.js之力导向图
- D3 笔记十:力导向图
- 数据可视化 D3.js实现力导向图之一(实现按指定字段确定link的source和target)
- D3力导向地图制作
- Echarts Force力导向图实现节点可折叠
- D3.js实现力导向图(Dray和Zoom)
- D3系列第三弹——绘制力导向图
- D3力导向图及树状布局变换
- D3+mysql 画Force图
- d3 force
- d3力学图(force layout)更新
- 【D3.js数据可视化系列教程】(二十四)--力导向图
- js模块模式(module)
- ZigBee_加密算法设置
- ContentResolver(内容提供器):安卓授权——读取联系人
- 上传仓库时跳出vim编辑器后的正确操作
- 剑指offer 面试题28 字符串的排列与集合的所有子集
- D3 force(力导向图)研究之一:完美融合拖拽与缩放
- spring-data-redis 哨兵配置例子
- python数据处理(csv->折线图)
- 在 Eclipse 里使用 PlantUML
- Java基础之IO输入输出流
- 欢迎使用CSDN-markdown编辑器
- 移动web前端(即:webapp)开发之常见bug解决
- StringUtils部分方法
- Flume1.7.0用户手册(一)