记录d3.js 力导向图的平移缩放,类似地图导航点击某一项移动到当前位置
项目中有用到d3.js用于图结构的查询,
需求如下:
- 右上角有个模糊搜索功能,查询出来的结果用列表展示
- 点击列表的某一列,要求画布移动到当前选中的节点的位置,基于画布正中间
搜索出来的结果列表展示用的element-ui表格,前台进行分页,不依赖后台,下面记录一下svg的平移
function translateSvg(d){
//获取svg的父元素
const parentBox = svg.node().parentElement
//获取父元素的宽度
const fullWidth = parentBox.clientWidth
//获取父元素的高度
const fullHeight = parentBox.clientHeight
/*画布的移动,加上移动时平滑的动画效果
*下面的fullWidth / 2 ,fullHeight / 2 基于画布的x,y,就是画布的正中间
*scale就是画布的放大缩小,小于1是缩放,大于1是放大
* d 的数据来源是点击表格的当前行的数据,就是你选中的几点的数据,取数据的x和y的坐标值
*/
svg.transition()
.duration()
.call(zoom.transform, d3.zoomIdentity.translate(fullWidth / , fullHeight / ).scale().translate(-d.x,-d.y))
}
记录d3.js 力导向图的平移缩放,类似地图导航点击某一项移动到当前位置的更多相关文章
- D3.js力导向图(适用于其他类型图)中后添加元素遮盖已有元素的问题解决
上一篇说了在D3.js中动态增加节点及连线的一种实现方式,但是有后添加元素遮盖原节点的现象,这一篇说一下出现这个现象的解决办法. 在D3.js中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后 ...
- D3.js 力导向图的显示优化
D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...
- D3.js 力导向图的拖拽(drag)与缩放(zoom)
不知道大家会不会跟我一样遇到这样的问题,在之前做的力导向图的基础上加上缩放功能的时候,拖动节点时整体会平移不再是之前酷炫的效果(失去了拉扯的感觉!).天啊,简直不能接受如此丑X的效果.经过不懈的努力终 ...
- D3.js力导向图中新增节点及新增关系连线示例
大家在使用D3.js中的力导向图时,基本都会遇到动态增加节点及连线的需求,这里记录一下我的实现方式. 话不多说,先放代码: <!DOCTYPE html> <html lang=&q ...
- D3.js 力导向图
花了大半天看了一个八十几行的代码..心累 力导向图是之前就有画过很多次的东西,但是这次的代码看上去很陌生,然后发现是D3更新了4.0.... 先贴代码 var svg = d3.select(&quo ...
- D3.js 力导向图的制作
力导向图中每一个节点都受到力的作用而运动,这种是一种非常绚丽的图表. 力导向图(Force-Directed Graph),是绘图的一种算法.在二维或三维空间里配置节点,节点之间用线连接,称为连线. ...
- D3.js 力导向图(气泡+线条+箭头+文字)
<!DOCTYPE html> <meta charset="utf-8"> <style> .link { fill: none; strok ...
- D3.js 力导向图(小气泡围绕中心气泡)
html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...
- D3.js+Es6+webpack构建人物关系图(力导向图),动态更新数据,点击增加节点,拖拽增加连线...
觉得不错的麻烦加个Star:https://github.com/zhangzn3/D3-Es6 在线预览地址:https://zhangzn3.github.io/D3-Es6 功能列表:1. 增加 ...
随机推荐
- drf-jwt分页器详解
drf偏移分页组件 pahenations.py from rest_framework.pagination import LimitOffsetPagination class MyLimitOf ...
- Prism 源码解读1-Bootstrapper和Region的创建
介绍 之前也研究过Prism框架但是一直没有深入理解,现在项目上想把一个Winform的桌面应用程序改造成WPF程序,同时我希望程序是可测试可维护架构良好的,Prism的这些设计理念正好符合我的需求, ...
- 升级 nop 4.1 Incorrect syntax near 'OFFSET'. Invalid usage of the option NEXT in the FETCH statement.
Incorrect syntax near 'OFFSET'. Invalid usage of the option NEXT in the FETCH statement. nop.web 项目 ...
- [gcd]Codeforces Common Divisors
Common Divisors time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...
- java 实现全排列
public List<List<Integer>> permute(int[] nums) { List<List<Integer>> res = n ...
- 如何将一篇文章导入Endnote并将引用插入Word
Endnote作为一款专注管理文献引用的工具用起来还是很方便的,极大地简化了管理引用格式等相关工作,让我们能够把更多精力用在写文章本身. 今天就介绍一下如何将一篇我们看到的觉得有参考价值的文章导入wo ...
- Oracle中rownum的用法总结
日期:2019/5/22 内容:oracle:数据库:rownum 数据库查询中,常用到"选取前X个"这样的问题,Oracle没有TOP关键字,这类问题都是通过rownum ...
- 调试 node.js 程序
调试 node.js 程序 在程序开发中,如何快速的查找定位问题是一项非常重要的基本功.在实际开发过程中,或多或少都会遇到程序出现问题导致无法正常运行的情况,因此,调试代码就变成了一项无法避免的工作. ...
- 记录一个不同的流媒体网站实现方法,和用Python爬虫爬它的坑
今天找到一片电影,想把它下载下来. 先开Networks工具分析一下: 初步分析发现,视频加载时会拉取TS格式的文件,推测这是一个m3u8的索引,记录着几百段TS文件,这样方便快进时加载. 但是实际分 ...
- Python——铅球飞行计算问题
一. 1.IPO描述为:输入:铅球发射角度. 初始速度(m/s). 初始高度(m) 处理:模拟铅球飞行,时刻更新铅球在飞行中的位置 输出:铅球飞行距离(m) 可以拆分小的时间段.任意时刻的位置,都是 ...