常用的看明白了,还有几个地方不太明白。

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的更多相关文章

  1. 【D3 API 中文手冊】

    [D3 API 中文手冊] 声明:本文仅供学习所用,未经作者同意严禁转载和演绎 <D3 API 中文手冊>是D3官方API文档的中文翻译. 始于2014-3-23日,基于VisualCre ...

  2. 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:/ ...

  3. d3 API scale

    比例尺有很多种类型,每一种类型都有各自的方法. 常用的是linear log oridinal linear .rangeRound(): 输出的值 四舍五入 .copy():返回一个独立的副本 .t ...

  4. d3 API axis

    场景 1.画网格线 使用方法.innerTickSize(): 指定内刻度大小 或者 .tickSize(inner, outer): 2.内外刻度线 innerTickSize outerTickS ...

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

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

  6. D3.js 力导向图的拖拽(drag)与缩放(zoom)

    不知道大家会不会跟我一样遇到这样的问题,在之前做的力导向图的基础上加上缩放功能的时候,拖动节点时整体会平移不再是之前酷炫的效果(失去了拉扯的感觉!).天啊,简直不能接受如此丑X的效果.经过不懈的努力终 ...

  7. D3平移和缩放后的点击坐标(D3 click coordinates after pan and zoom)

    我使用D3库来创建绘图应用程序. 我需要在用户单击的坐标上绘制对象(为了简单起见).问题是当用户使用平移&缩放和移动视口.然后对象是错误的位置的地方(我想问题是事件坐标是相对于svg元素而不是 ...

  8. 使用d3.js的时候,如何用zoom translate scale限制拖拽范围

    红色代表需要改写的代码 1.添加定义图像大小和容器的大小及坐标 d3.behavior.zoom = function () { var moveCanvas={ width: , height: , ...

  9. d3可视化实战04:事件绑定机制

    首先说明,d3支持所有的JS事件——甚至其他代码的自定义事件.这里有一个列表,The MDN Event Reference, 包含了几乎所有浏览器创建的事件类型.大家有需要可以去查看. D3的事件绑 ...

随机推荐

  1. python-mysqldb安装

    出现错误  command 'gcc' failed with exit status 1 解决办法: yum install python-devel mysql-devel zlib-devel ...

  2. geoserver使用curl发布 imagemosaic

    1.//create workspace     curl -v -u admin:geoserver -XPOST -H "Content-type: text/xml" -d ...

  3. 漫谈Linux内核哈希表(1)

    关于哈希表,在内核里设计两个很重要的数据结构:    哈希链表节点: 点击(此处)折叠或打开 .x [include/linux/types.h]*/ struct hlist_node { stru ...

  4. Oracle归档模式和非归档模式

    一 什么是Oracle归档模式? Oracle数据库有联机重做日志,这个日志是记录对数据库所做的修改,比如插入,删除,更新数据等,对这些操作都会记录在联机重做日志里.一般数据库至少要有2个联机重做日志 ...

  5. vim 查看文件二进制格式

    用vim打开文件,vim -b file,选项-b是二进制模式打开   然后输入 :%!xxd,就可看到二进制编码     其实在linux下,直接输入xxd file 也是可以看到的文件二进制格式的

  6. Jquery实现文字向上逐条滚动

    直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...

  7. Sprint3(12.18)总结

    Sprint3第三阶段 1.类名:软件工程-第三阶段 2.时间:至12.18 3.选题内容:web版-餐厅到店点餐系统 4.团队博客地址: http://www.cnblogs.com/queenju ...

  8. silverLight--绑定数据dataGrid

    后台代码编写 ,为表格绑定数据: using System; using System.Collections.Generic; using System.Linq; using System.Net ...

  9. 字符串分割函数(New)

    unit Unit1; interface uses  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Form ...

  10. sql中的日期查询

    今天的所有数据: 昨天的所有数据: 7天内的所有数据: 30天内的所有数据: 本月的所有数据: 本年的所有数据: 查询今天是今年的第几天: select datepart(dayofyear,getD ...