不知道大家会不会跟我一样遇到这样的问题,在之前做的力导向图的基础上加上缩放功能的时候,拖动节点时整体会平移不再是之前酷炫的效果(失去了拉扯的感觉!)。天啊,简直不能接受如此丑X的效果。经过不懈的努力终于解决了这个问题。
以下是事情发生的原因及解决的代码:
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)的更多相关文章

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

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

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

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

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

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

  4. D3.js 力导向图

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

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

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

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

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

  7. 记录d3.js 力导向图的平移缩放,类似地图导航点击某一项移动到当前位置

    项目中有用到d3.js用于图结构的查询, 需求如下: 右上角有个模糊搜索功能,查询出来的结果用列表展示 点击列表的某一列,要求画布移动到当前选中的节点的位置,基于画布正中间 搜索出来的结果列表展示用的 ...

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

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

  9. Vue和d3.js(v4)力导向图force结合使用,v3版本升级v4【一】

    前段时间因为参与项目涉密,所以一直没有更新博客,有些博友给我私信或者留言要部分博文的源码,因为我的电脑更换,demo的源码没有备份 所以无法提供.大家可针对具体问题问我,有空我定会回复的.另外转发文章 ...

随机推荐

  1. Ubuntu16.04下安装搜狗输入法及实现中英文转换问题

    1.问题描述 版本信息:Ubuntu16.04 解决问题:搜狗输入法的安装 2.解决办法 STEP1:搜索搜狗输入法for Linux --> 选择64bit --> 下载得到一个sogo ...

  2. ATM 最初版

    # 二 一个项目开发前,有一份开发文档 # # 项目: 编写小说阅读程序实现下属功能 # # # 一:程序运行开始时显示 # 0 账号注册 # 1 账号登录 # 2 充值功能 # 3 阅读小说 imp ...

  3. 用Arcgis缓存文件发布服务

    切片文件类型为: 其中_alllayers中为各等级的切片文件,xml文件为切片信息(级别).发布服务的步骤如下: 1.将文件拷贝到服务器上: 2.将gdb和xml文件拷贝出来,放到桌面上: 3.打开 ...

  4. python中面向对象&装饰器

    类的定义 基本形式: class ClassName(object): Statement 1.class定义类的关键字 2.ClassName类名,类名的每个单词的首字母大写. 3.object是父 ...

  5. iOS 项目优化

    前言 iOS性能优化系列篇之"优化总体原则" 不要提前过度优化 要找到性能瓶颈 要在不同性能指标间权衡 要理解优化任务的底层运行机制 要有技术保障体系 一.启动速度优化 1.1 学 ...

  6. std::bind接口与实现

    前言 最近想起半年前鸽下来的Haskell,重温了一下忘得精光的语法,读了几个示例程序,挺带感的,于是函数式编程的草就种得更深了.又去Google了一下C++与FP,找到了一份近乎完美的讲义,然后被带 ...

  7. [noip模拟]难缠的值周生<宽搜>

    难缠的值周生 [问题描述] 小 P 上学总是迟到,迟到了以后常常会被值周生发现.被值周生发现就会给他所在的班级扣分,被扣了分不免要挨班主任的训,这令小 P 很不爽.不过,聪明的他经过观察发现,值周生通 ...

  8. 美国NOAA/AVHRR遥感数据

    1.美国国家海洋和大气管理局(National Oceanic and Atmospheric Administration,NOAA) 美国国家海洋和大气管理局隶属于美国商业部下属的科技部门,主要关 ...

  9. Java系列之内部类

    今天温习一下 Java 中的内部类,内部类一般有如下几种:静态内部类.成员内部类.匿名内部类和方法内部类,下文中将主要介绍静态内部类和成员内部类,主要内容如下: 概述 静态内部类 成员内部类 匿名内部 ...

  10. RbbitMQ详解

    高性能消息队列RabbitMQ 1.为什么要使用mq 主要解决应用解耦,流量削峰,异步消息,实现高性能,可升缩,最终一致性的架构. 2.activeMq的通讯模式 基于队列(点对点)与发布订阅(有多个 ...