d3 API zoom
常用的看明白了,还有几个地方不太明白。
zoom函数: area path circle
.on("zoom", function(){
that.svg_obj.select(".x.axis").call(xAxis); var _lines = that.lines;
for(var i=0; i<_lines.length; i++){
that.svg_obj.select(".g"+i+" path.line")
.attr("d", lineFunction(_lines[i].dataset))
;
that.svg_obj.select(".g"+i+" path.area")
.attr("d", areaFunction(_lines[i].dataset))
;
that.svg_obj.selectAll(".g"+i+" circle").attr("d", function(){
that.svg_obj.selectAll(".g"+i+" circle").attr('cx', function(d,i){
return xScale(i);
})
.attr('cy', function(d){
return yScale(d);
})
;
});
} });
d3 API zoom的更多相关文章
- 【D3 API 中文手冊】
[D3 API 中文手冊] 声明:本文仅供学习所用,未经作者同意严禁转载和演绎 <D3 API 中文手冊>是D3官方API文档的中文翻译. 始于2014-3-23日,基于VisualCre ...
- D3 API总览
D3图形库API参考 https://github.com/d3/d3/wiki/API--%E4%B8%AD%E6%96%87%E6%89%8B%E5%86%8C d3 官网 API https:/ ...
- d3 API scale
比例尺有很多种类型,每一种类型都有各自的方法. 常用的是linear log oridinal linear .rangeRound(): 输出的值 四舍五入 .copy():返回一个独立的副本 .t ...
- d3 API axis
场景 1.画网格线 使用方法.innerTickSize(): 指定内刻度大小 或者 .tickSize(inner, outer): 2.内外刻度线 innerTickSize outerTickS ...
- 【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)
缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.z ...
- D3.js 力导向图的拖拽(drag)与缩放(zoom)
不知道大家会不会跟我一样遇到这样的问题,在之前做的力导向图的基础上加上缩放功能的时候,拖动节点时整体会平移不再是之前酷炫的效果(失去了拉扯的感觉!).天啊,简直不能接受如此丑X的效果.经过不懈的努力终 ...
- D3平移和缩放后的点击坐标(D3 click coordinates after pan and zoom)
我使用D3库来创建绘图应用程序. 我需要在用户单击的坐标上绘制对象(为了简单起见).问题是当用户使用平移&缩放和移动视口.然后对象是错误的位置的地方(我想问题是事件坐标是相对于svg元素而不是 ...
- 使用d3.js的时候,如何用zoom translate scale限制拖拽范围
红色代表需要改写的代码 1.添加定义图像大小和容器的大小及坐标 d3.behavior.zoom = function () { var moveCanvas={ width: , height: , ...
- d3可视化实战04:事件绑定机制
首先说明,d3支持所有的JS事件——甚至其他代码的自定义事件.这里有一个列表,The MDN Event Reference, 包含了几乎所有浏览器创建的事件类型.大家有需要可以去查看. D3的事件绑 ...
随机推荐
- C#多线程实现方法
C#中实现线程应用开发的类都包含在了System.Threading命名空间中,比较常用的是Thread,ThreadPool类 Thread类构造函数作用是创建线程,有两个重载版本,一个带参数,一个 ...
- 记录容易忘记的知识点(html 内容)
<xx 表文件名> 导入外部样式表 <link type="text/css" rel="stylesheet" href="xx. ...
- C#中的线程(一)入门
文章系参考转载,英文原文网址请参考:http://www.albahari.com/threading/ 作者 Joseph Albahari, 翻译 Swanky Wu 中文翻译作者把原文放在了& ...
- HR开发 获取信息类型数据
1.PNP逻辑数据库. LOOP获取信息类型数据. TABLES: PERNR . , . START-OF-SELECTION. GET PERNR . LOOP AT P0000 WHERE .. ...
- Android开发工具全面转向Android Studio(1)——准备开发环境
工欲善其事必先利其器,本文适合Android新手以及用过Eclipse而没用过Android Studio开发Android的老手,众所周知,谷歌是不会再维护和开发ADT了,旧的ADT已经是完全不能渲 ...
- Hibernate QBC运算符
HQL运算符 QBC运算符 含义 = Restrictions.eq() 等于equal <> Restrictions.ne() 不等于not equal > Restrict ...
- [game]十字链表的AOI算法实现
AOI主要有九宫格.灯塔和十字链表的算法实现.本文阐述十字链表的实现和尝试. 1. 基本原理 根据二维地图,将其分成x轴和y轴两个链表.如果是三维地图,则还需要维护多一个z轴的链表.将对象的坐标值按照 ...
- C# 抓取网站数据
项目主管说这是项目中的一个亮点(无语...), 类似于爬虫一类的东西,模拟登陆后台系统,获取需要的数据.然后就开始研究这个. 之前有一些数据抓取的经验,抓取流程无非:设置参数->服务端发送请求- ...
- phantomjs和angular-seo-server实现angular单页面seo
1.下载phantomjs,并配置环境变量为 eg:E:\phantomjs-2.1.1-windows\bin 2.下载angular-seo-server 3.windows下:cmd eg: ...
- app之间的跳转,进入二级界面
功能实现:A跳到B并打开B中指定页面.http://blog.csdn.net/dollyyang/article/details/50325307 点击页面判断是否安装app并打开,否则跳转app ...