项目中有用到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 力导向图的平移缩放,类似地图导航点击某一项移动到当前位置的更多相关文章

  1. D3.js力导向图(适用于其他类型图)中后添加元素遮盖已有元素的问题解决

    上一篇说了在D3.js中动态增加节点及连线的一种实现方式,但是有后添加元素遮盖原节点的现象,这一篇说一下出现这个现象的解决办法. 在D3.js中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后 ...

  2. D3.js 力导向图的显示优化

    D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...

  3. D3.js 力导向图的拖拽(drag)与缩放(zoom)

    不知道大家会不会跟我一样遇到这样的问题,在之前做的力导向图的基础上加上缩放功能的时候,拖动节点时整体会平移不再是之前酷炫的效果(失去了拉扯的感觉!).天啊,简直不能接受如此丑X的效果.经过不懈的努力终 ...

  4. D3.js力导向图中新增节点及新增关系连线示例

    大家在使用D3.js中的力导向图时,基本都会遇到动态增加节点及连线的需求,这里记录一下我的实现方式. 话不多说,先放代码: <!DOCTYPE html> <html lang=&q ...

  5. D3.js 力导向图

    花了大半天看了一个八十几行的代码..心累 力导向图是之前就有画过很多次的东西,但是这次的代码看上去很陌生,然后发现是D3更新了4.0.... 先贴代码 var svg = d3.select(&quo ...

  6. D3.js 力导向图的制作

    力导向图中每一个节点都受到力的作用而运动,这种是一种非常绚丽的图表. 力导向图(Force-Directed Graph),是绘图的一种算法.在二维或三维空间里配置节点,节点之间用线连接,称为连线. ...

  7. D3.js 力导向图(气泡+线条+箭头+文字)

    <!DOCTYPE html> <meta charset="utf-8"> <style> .link { fill: none; strok ...

  8. D3.js 力导向图(小气泡围绕中心气泡)

    html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...

  9. D3.js+Es6+webpack构建人物关系图(力导向图),动态更新数据,点击增加节点,拖拽增加连线...

    觉得不错的麻烦加个Star:https://github.com/zhangzn3/D3-Es6 在线预览地址:https://zhangzn3.github.io/D3-Es6 功能列表:1. 增加 ...

随机推荐

  1. NeurIPS 2019 | 基于Co-Attention和Co-Excitation的少样本目标检测

    论文提出CoAE少样本目标检测算法,该算法使用non-local block来提取目标图片与查询图片间的对应特征,使得RPN网络能够准确的获取对应类别对象的位置,另外使用类似SE block的sque ...

  2. Dubbo 扩展点加载机制:从 Java SPI 到 Dubbo SPI

    SPI 全称为 Service Provider Interface,是一种服务发现机制.当程序运行调用接口时,会根据配置文件或默认规则信息加载对应的实现类.所以在程序中并没有直接指定使用接口的哪个实 ...

  3. Linux下反弹shell笔记

    0x00 NC命令详解 在介绍如何反弹shell之前,先了解相关知识要点. nc全称为netcat,所做的就是在两台电脑之间建立链接,并返回两个数据流 可运行在TCP或者UDP模式,添加参数 —u 则 ...

  4. 基于 websocket 的多端桥接平台

    我们现在的业务是基于新闻客户端实现的,都要经过新闻客户端的环境,进行前后端数据上的交互.但是我们在调试过程中,非常的不方便. 通常使用的工具有:modheader, postman, fiddler ...

  5. servlet本质是什么

    作者:Javdroider Hong链接:https://www.zhihu.com/question/21416727/answer/339012081来源:知乎著作权归作者所有.商业转载请联系作者 ...

  6. PAT 乙级 1007. 素数对猜想 (20) c++ 筛选法求素数

    PAT 乙级 1007. 素数对猜想 (20) c++ 筛选法求素数 让我们定义 dn 为:dn = pn+1 - pn,其中 pi 是第i个素数.显然有 d1=1 且对于n>1有 dn 是偶数 ...

  7. Vue history路由模式 apache配置上线

    1. 首先在vue项下的router.js 文件配置 mode为history模式,并且设置好对应的base选项 说明:base配置为你当前项目实际上线时所在的目录文件夹, 我这就是放在站点的根目录下 ...

  8. coding++:js实现基于Base64的编码及解码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 生产-消费者,C++11实现

    C++11中新增加了线程库<thread>和原子操作库<atomic>,使用这两个库可以实现生产——消费者模型.上代码 //生产者生产函数 void product(std:: ...

  10. C/C++知识总结 三 C/C++数据类型与输入输出

    C/C++数据类型与输入输出 基本数据类型 输入与输出 复合数据类型(将在下几篇博客中总结) C/C++数据类型 数据类型总图 数据类型差别 数据类型不同的意义 1)指明数据的大小,以便正确分配,访问 ...