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的事件绑 ...
随机推荐
- HTML页面弹出自定义对话框带遮蔽罩(使用JavaScript)
转载:http://blog.sina.com.cn/s/blog_610f47c50100ohe4.html 原理其实很简单:首先绘制弹出的自定义对话框,将其使用display:none隐藏,因为设 ...
- 很多事情就像看A片,看的人觉得很爽,做的人未必。
http://m.jingdianju.com/wzgs/shenghuo/201307185135.html 转载自: 从这个角度上来说,我不太赞成过于关注第一份工作的薪水,更没有必要攀比第一份工作 ...
- Java(类与对象)
1>对象判等 请输入并运行以下代码,得到什么结果? public class Test { public static void main(String[] args) { // TODO Au ...
- python学习之——splinter使用
开始学习使用splinter工具了,目前是摸索中,先熟悉splinter工具的使用方法~~ 实现功能: 打开firefox浏览器->www.baidu.com->输入关键词 python, ...
- tomcat项目的部署
当我们把web项目做好了以后,一般要进行部署,我一般采用两种方式来部署.一种是直接启动tomcat的startup.bat,一种是将tomcat做成服务. 1.第一种方法较为简单,先复制一份tomca ...
- 【转】oracle查询用户表,函数,储存过程,
◆Oracle查询用户表空间:select * from user_all_tables ◆Oracle查询所有函数和储存过程:select * from user_source ◆Oracle查询所 ...
- 用clock()函数计算多项式的运行时间
百度百科中定义clock():clock()是C/C++中的计时函数,而与其相关的数据类型是clock_t.在MSDN中,查得对clock函数定义如下: clock_t clock(void) ; 简 ...
- 架设Web服务器
服务器是网站的灵魂,是打开网站的必要载体.按照体系架构来区分,服务器主要分为非X86服务器.x86服务器.非X86服务器使用RISC(精简指令集)或EPIC(并行指令代码)处理器:X86服务器又称CI ...
- hihoCoder 1309:任务分配 贪心 优先队列
#1309 : 任务分配 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定 N 项任务的起至时间( S1, E1 ), ( S2, E2 ), ..., ( SN, ...
- java日常时间处理
private static String[] parsePatterns = { "yyyy-MM-dd", "yyyy-MM-dd HH:mm:ss", & ...