D3.js 力导向图的拖拽(drag)与缩放(zoom)
以下是事情发生的原因及解决的代码:
var zoom = d3.behavior.zoom()
.scaleExtent([, ]) //缩放范围
.on("zoom", zoomed); function zoomed() {
container.attr("transform", //此处的container是之前svg下 append('g')后返回的对象
"translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
var container = svg.append("g") //相当于缩放的容器
.call(zoom);
加入以上的代码后,缩放的功能是实现了。但是,拖动节点的时候 不再有力拉动的感觉 而是整个图的平移。(如下图)
我们理想中的拖动效果不应该和缩放效果冲突,所以又去重新看了官网的例子
猜测可能是
这边定义的是缩放加整个的平移 所以拖动的时候 是整个力导向图的平移。
根据官网的例子调整了下代码:
定义drag时调用的方法:

对应的方法:
调用拖拽函数:
更新后调用的示例:
D3.js 力导向图的拖拽(drag)与缩放(zoom)的更多相关文章
- D3.js力导向图(适用于其他类型图)中后添加元素遮盖已有元素的问题解决
上一篇说了在D3.js中动态增加节点及连线的一种实现方式,但是有后添加元素遮盖原节点的现象,这一篇说一下出现这个现象的解决办法. 在D3.js中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后 ...
- D3.js 力导向图的显示优化
D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...
- 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 力导向图的平移缩放,类似地图导航点击某一项移动到当前位置
项目中有用到d3.js用于图结构的查询, 需求如下: 右上角有个模糊搜索功能,查询出来的结果用列表展示 点击列表的某一列,要求画布移动到当前选中的节点的位置,基于画布正中间 搜索出来的结果列表展示用的 ...
- D3.js 力导向图(小气泡围绕中心气泡)
html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...
- Vue和d3.js(v4)力导向图force结合使用,v3版本升级v4【一】
前段时间因为参与项目涉密,所以一直没有更新博客,有些博友给我私信或者留言要部分博文的源码,因为我的电脑更换,demo的源码没有备份 所以无法提供.大家可针对具体问题问我,有空我定会回复的.另外转发文章 ...
随机推荐
- [BJDCTF 2nd]old-hack
进入首页: 首页告诉了我们是thinkphp5的漏洞. 知道了是哪个版本的话就搜一搜喽:最后发现是thinkphp5.0.23的命令执行 payload_1:查看根目录文件,发现flag位置 http ...
- pandas 的常用方法
pandas的常用方法: 1.数据输入 2.数据查看 3.数据清洗 4.数据处理 5.数据提取 6.数据筛选 7.数据汇总 8.数据统计 9.数据输出 详情见: https://blog.csdn.n ...
- java-Deque
2020-03-07 13:42:05 双端队列与通常的Queue的区别仅仅在于多了双端队列可以在队首队尾进行插入或者删除操作. 队尾添加:offerLast 队尾删除:pollLast 队尾查询:p ...
- Hadoop调度器
一.FIFO调度器(先进先出调度) 上图为FIFO调度器的执行过程示意图.FIFO Scheduler是最简单也是最容易理解的调度器,它缺点是不适用于共享集群.大的应用可能会占用所有集群资源,这就导致 ...
- CSS三角形/气泡的实现原理及应用
记得第一次面试,面试官问如何用css实现一个不规则三角形?好叭 ·-·,触及到知识盲区了,手动叹气(╥﹏╥),好在别的回答的还好,没挂
- 【问题解决】-《java.lang.NoClassDefFoundException》
此问题相比与ClassNotFoundException,不容易找到,当然这两者都属于jvm加载类时的错误.导致 NoClassDefFoundException的原因:编译时不报错,运行时在内存中找 ...
- 使用Keras构建深度图像搜索引擎
动机 想象一下,如果有数十万到数百万张图像的数据集,却没有描述每张图像内容的元数据.我们如何建立一个系统,能够找到这些图像的子集来更好地回答用户的搜索查询? 我们基本上需要的是一个搜索引擎,它能够根据 ...
- 编译原理:LL(1)文法的判断,递归下降分析程序
1. 文法 G(S): (1)S -> AB (2)A ->Da|ε (3)B -> cC (4)C -> aADC |ε (5)D -> b|ε 验证文法 G(S)是不 ...
- Mybatis 小记
1,mybatis 中 $ # 区别 mybatis 动态传参的两种方式 #{ }在动态解析的时候,会将#{ } 解析为一个预编译阶段的一个标记符号?,在预处理阶段才会替换 ${ }在动态解析的时候, ...
- [bzoj4977]跳伞求生<贪心>
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4977 这是八月月赛的一道题,月赛的时候和同学讨论了一下,最后由一位叫二哥的大佬率先AC,用 ...