记录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. 增加 ...
随机推荐
- kerberos系列之hive认证配置
大数据安全系列之hive的kerberos认证配置,其它系列链接如下 https://www.cnblogs.com/bainianminguo/p/12548076.html-----------安 ...
- 新手版超详细LoadRunner12完整安装+汉化过程
01下载 首先从百度网盘获取到这几个文件(网盘地址会附在文末,过期请联系): 我安装的是社区版+中文汉化过的,使用我只下载了第一个和第三个文件,下面我将讲一下如何安装. 02安装社区版 1.选择“ ...
- 第七周java实验作业
实验七 继承附加实验实验时间 2018-10-11 1.实验目的与要求 (1)进一步理解4个成员访问权限修饰符的用途: Public 该类或非该类均可访问 Private 只有该类可以访问 Pro ...
- 一个使用fasttext训练的新闻文本分类器/模型
fastext是什么? Facebook AI Research Lab 发布的一个用于快速进行文本分类和单词表示的库.优点是很快,可以进行分钟级训练,这意味着你可以在几分钟时间内就训练好一个分类模型 ...
- [A*,启发式搜索] [SCOI2005] 骑士精神
链接:https://ac.nowcoder.com/acm/problem/20247来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言52428 ...
- Building Applications with Force.com and VisualForce Dev 401-001(一):Introduction
Dev 401-001:Introduction Module Objectives1.Orient yourselves to the training location.2.Understan ...
- 十 | 门控循环神经网络LSTM与GRU(附python演练)
欢迎大家关注我们的网站和系列教程:http://panchuang.net/ ,学习更多的机器学习.深度学习的知识! 目录: 门控循环神经网络简介 长短期记忆网络(LSTM) 门控制循环单元(GRU) ...
- 关于用命令行和idea对项目打jar包
前提说一下,我们一般是对编译后的项目进行打包,不然打包后还得自己去重新编译class文件. 假如这是你的一个项目目录: 我们要写一个简单的计算器工具类项目,然后对他进行打包, idea里面out文件夹 ...
- AI体验类产品竞品分析
1.业界状态 人工智能(Artificial Intelligence),简称AI.上个世纪50年代就有一批年轻的科学家提出了这一概念,经历过50多年的长足发展,信息化建设的脚步不断加快,机器人战胜人 ...
- linux 访问windows 共享文件
用到的方法是 CIFS (Common Internet File System)windows自己的网络文件系统 操作系统: Linux为 debian. Windows 为 windows 8 ...