d3.js 平移缩放
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 平移缩放的更多相关文章
- D3.js 使用缩放zoom时节点无法拖动,只能整体移动的问题
.on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); }) https://stackover ...
- 记录d3.js 力导向图的平移缩放,类似地图导航点击某一项移动到当前位置
项目中有用到d3.js用于图结构的查询, 需求如下: 右上角有个模糊搜索功能,查询出来的结果用列表展示 点击列表的某一列,要求画布移动到当前选中的节点的位置,基于画布正中间 搜索出来的结果列表展示用的 ...
- 【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)
缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.z ...
- d3.js封装文本实现自动换行和旋转平移等功能
我们下面话不多说,本文主要介绍的是利用D3.js封装文本实现自动换行功能的步骤,下面来一起看看吧. 一.引用 multext.js 文件 multext.js function appendMulti ...
- d3.js 地铁轨道交通项目实战
上一章说了如何制作一个线路图,当然上一章是手写的JSON数据,当然手写的json数据有非常多的好处,例如可以应对客户的各种BT需求,但是大多数情况下我们都是使用地铁公司现成的JSON文件,话不多说我们 ...
- 【 D3.js 入门系列 --- 3 】 做一个简单的图表!
前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...
- D3.js 简介和安装
一.What´s D3.js D3.js是一种数据操作类型的javascript库(也可视其为插件):结合HTML,SVG和CSS,D3可以图形化的,生动的展现数据. D3 的全称是(Data-Dri ...
- 【 D3.js 高级系列 — 7.0 】 标注地点
有时需要告诉用户地图上的一些目标,如果该目标是只需要一个坐标就能表示的,称其为"标注". 1. 标注是什么 标注,是指地图上只需要一个坐标即可表示的元素.例如,在经纬度(116, ...
- 【 D3.js 高级系列 — 1.1 】 封装文本自动换行
在[高级 - 第 1.0 章]中讲解了在 SVG 中如何配合使用 text 和 tspan 来实现换行的功能,本文对此功能进行一下封装,以后就可以直接用了. 1. 引用 js 文件 下载地址:mult ...
随机推荐
- 工控随笔_13_西门子_WinCC的VBS脚本_04_变量类型之二
上一个随笔说了一些关于vbs变量类型的内容,这一篇我们继续说说变量类型相关的内容. 一.NULL补充内容 '需要注意的是,NULL不能简单通过 = 来进行比较,而必须通过 'IsNull函数来实现 ' ...
- tp框架增删改
选择一张表: 首先要创建模型: 1 $n = M("account"); 数据库添加数据: 1.使用数组: 1 2 3 1.使用数组 $arr = array("uid& ...
- nice team(第一次会议)
在周日经过一番讨论后,nice team成功上线了,四个独特的灵魂聚集在一起,想要一起做一番“大事业”,首先第一篇博客当然就是我们的成员大亮相. 詹晔康:我们组的最强王者,也是我们的项目经理.第一次讨 ...
- Linux下的快捷键
1:tab 键 命令补全 路径补全 2:Ctrl+C 命令的中止 3:Ctrl+D 退出当前的会话 exit logout 4:Ctrl+l clear 清屏 5 ...
- 性能测试过程中oracle数据库报ORA-27301 ORA-27302错
最近在性能测试过程中发现,发现虚拟用户数上不去,加载到一定的数量应用端就报错,提示连接数据库出错.在测试的过程中查看web容器的线程池 数据源的连接池 都还有空闲,同时查看oracle的v$sessi ...
- 数据传输流程和socket简单操作
一.***C/S架构:客户端(client)/服务端(server)架构, B/S架构:浏览器(browser) / 服务端(server)架构 软件cs架构:浏览器,qq,微信,陌陌等等硬件cs架构 ...
- JavaScript数组方法--reduce、reduceRIght、reverse
今天写的reduce是比较复杂的一个数组方法,其实在这之前我也用过reduce,可是每次用起来总感觉不那么顺手,主要还是因为不熟,对reduce本身不熟.首先reduce这个单词翻译为中文,不那么直观 ...
- 学习笔记 urllib
第一步: get # -*- coding:utf-8 -*- # 日期:2018/5/15 19:39 # Author:小鼠标 from urllib import request url = ' ...
- !!常用HTML5代码
HTML5提供的新特性 2016-2-16 Web Socket 定义了一套API, 允许网页能够使用Web Socket协议来和远程主机进行双工通信. Web Storage 定义了一套API, 能 ...
- Windows服务器
知道了怎么装VMware workstation并且创建虚拟机装上了系统配好网络