rt 记录一下

           var zoom = d3.zoom()
.scaleExtent([0.1,10])
.on("zoom", zoomed); function zoomed() {
d3.select('#g_main').attr("transform", d3.event.transform);
}

这里事件给了svg标签, g标签 定义id为g_main

这样就可以在svg标签内的任意位置来缩放g标签了.

d3.js 平移缩放的更多相关文章

  1. D3.js 使用缩放zoom时节点无法拖动,只能整体移动的问题

    .on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); }) https://stackover ...

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

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

  3. 【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)

    缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.z ...

  4. d3.js封装文本实现自动换行和旋转平移等功能

    我们下面话不多说,本文主要介绍的是利用D3.js封装文本实现自动换行功能的步骤,下面来一起看看吧. 一.引用 multext.js 文件 multext.js function appendMulti ...

  5. d3.js 地铁轨道交通项目实战

    上一章说了如何制作一个线路图,当然上一章是手写的JSON数据,当然手写的json数据有非常多的好处,例如可以应对客户的各种BT需求,但是大多数情况下我们都是使用地铁公司现成的JSON文件,话不多说我们 ...

  6. 【 D3.js 入门系列 --- 3 】 做一个简单的图表!

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  7. D3.js 简介和安装

    一.What´s D3.js D3.js是一种数据操作类型的javascript库(也可视其为插件):结合HTML,SVG和CSS,D3可以图形化的,生动的展现数据. D3 的全称是(Data-Dri ...

  8. 【 D3.js 高级系列 — 7.0 】 标注地点

    有时需要告诉用户地图上的一些目标,如果该目标是只需要一个坐标就能表示的,称其为"标注". 1. 标注是什么 标注,是指地图上只需要一个坐标即可表示的元素.例如,在经纬度(116, ...

  9. 【 D3.js 高级系列 — 1.1 】 封装文本自动换行

    在[高级 - 第 1.0 章]中讲解了在 SVG 中如何配合使用 text 和 tspan 来实现换行的功能,本文对此功能进行一下封装,以后就可以直接用了. 1. 引用 js 文件 下载地址:mult ...

随机推荐

  1. 平安技术开放日质量保证技术专场第一期 [附部分 ppt]

    4月8号在上海平安大厦,平安证券和Tester联合举办了一场质量保证技术专场,附上部分PPT 平安技术开放日介绍   ppt下载 A/B测试的大数据架构实践 链接: http://pan.baidu. ...

  2. 20164310Exp1 PC平台逆向破解和BOF基础

    1.逆向及Bof基础实践说明        1.1实践目标 实践对象:pwn1的linux可执行文件 实践目的:使程序执行另一个代码(ShellCode) 实践内容: 手工修改可执行文件,改变程序执行 ...

  3. three.js中的文字

    1.三维文字 三维字体文字,使用的是FontLoader,字体文件通过来facetype.js生成 addCityText: function () { var self = this; var ci ...

  4. Git 分布式版本管理器 windows环境下使用

    首先需要下载Git来安装  没有安装文件的小伙伴可以网盘下载——>   https://pan.baidu.com/s/1owwUItDri9skqYzOjzXLsw 之后安装Git  一路很顺 ...

  5. web前端基础学习路线

    1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...

  6. gmer ver2.1.19357

    gmer是一款来自 波兰 的多功能安全监控分析程序.它可以结束除了System和System Idle Process以外几乎所有的进程,还可以查看被隐藏的进程,服务以及驱动(以红色的方式显示此进程. ...

  7. 转:APP开发浅谈-Fiddler抓包详解

    原文地址:http://www.luoxudong.com/?p=306 Fiddler抓包工具在APP开发过程中使用非常频繁,对开发者理解HTTP网络传输原理以及分析定位网络方面的问题非常有帮助.今 ...

  8. 4-HBase

    定义: HBase是一个分布式的.面向列的开源数据库,该技术来源于 Fay Chang 所撰写的Google论文“Bigtable:一个结构化数据的分布式存储系统”.就像Bigtable利用了Goog ...

  9. 深入理解Major GC, Full GC, CMS

    很多人都分不清Major GC, Full GC的概念,事实上我查了下资料,也没有查到非常精确的Major GC和Full GC的概念定义.分不清这两个概念可能就会对这个问题疑惑:Full GC会引起 ...

  10. CentOS安装MySQL的完整步骤

    1.官方安装文档 http://dev.mysql.com/doc/mysql-yum-repo-quick-guide/en/ 2.下载 Mysql yum包 http://dev.mysql.co ...