D3.js 入门学习(二) V4的改动
//d3.scan
/*
新的d3.scan方法对数组进行线性扫描,并根据指定的比较函数返回至少一个元素的索引。
这个方法有点类似于d3.min和d3.max。
而d3.scan可以得到极值的索引而不仅仅是计算极值。
*/
var a1 = [1,3,5,2,9];
var i = d3.scan(a1,function(a,b){
return b-a; // 返回最大值的索引, a-b; 返回最小值的索引
});
console.log(i); //4; //d3.ticks d3.ticks和d3.tickStep方法在生成刻度时是非常有用的。
// 可以代替生成d3-scale的continuous.ticks。 0-400之间取8个刻度
var ticks = d3.ticks(0,400,8);//[0, 50, 100, 150, 200, 250, 300, 350, 400]
console.log(ticks) //d3.range d3.range方法,当step非整数时候不再对浮点进行校正,
// 而是严格返回start+i*step,其中i为整数。当范围为无限大时返回空数组而不是报错。
//3.x中
d3.range(0,1,0.3) //[0, 0.3, 0.6, 0.9]
d3.range(Infinity) //出错
//4.0中
d3.range(0,1,0.3) //[0, 0.3, 0.6, 0.8999999999999999]
d3.range(Infinity) //[] //d3.svg.axis;
//3.x中使用d3.svg.axis和axis.orient来定义坐标轴,
// 而4.0你可以直接使用d3.axisTop, d3.axisRight, d3.axisBottom,
// d3.axisLeft四种方法来生成轴。 var a2 = [];
for(var i = 0; i < 18; i++){
a2[i] = (-1.4 + 0.2 * i).toFixed(1);
}
console.log(a2)
var body = d3.select('body');
var svg = body.append('svg').attr('width',1000).attr('height',400); var linear = d3.scaleLinear().domain([-1.4,1.4]).range([200,800]); var axis = d3.axisBottom(linear); svg.append('g').call(axis); //d3.svg.brush =>4.0提供了d3.brushX,d3.brushY和d3.brush来表示沿着x方向,
// y方向和两个方向的3个子类。brushes不再依赖于比例尺而是定义了一个基于屏幕坐标的选择集。
// 但是可以根据坐标和比例尺反转来查询对应的域中包含的数据。 //d3.set();
var yields = [
{yield: 22.13333, variety: "Manchuria", year: 1932, site: "Grand Rapids"},
{yield: 26.76667, variety: "Peatland", year: 1932, site: "Grand Rapids"},
{yield: 28.10000, variety: "No. 462", year: 1931, site: "Duluth"},
{yield: 38.50000, variety: "Svansota", year: 1932, site: "Waseca"},
{yield: 40.46667, variety: "Svansota", year: 1931, site: "Crookston"},
{yield: 36.03333, variety: "Peatland", year: 1932, site: "Waseca"},
{yield: 34.46667, variety: "Wisconsin No. 38", year: 1931, site: "Grand Rapids"}
]; var sites = d3.set(yields, function(d) { return d.site; });
console.log(sites);//Grand Rapids, Duluth, Waseca, Crookston
//d3.color();
/*
所有的颜色都可以使用color.opacity来设置透明度([0,1])。可以使用一个不含透明度参数的构造方法产生一个颜色,如d3.rgb,d3.hsl,d3.lab,d3.hcl或者d3.cubehelix。
可以使用d3.color方法来将CSS颜色字符串转为RGB或HSL颜色。它返回d3.color的实例或者null(如果字符串无效)
var red = d3.color("hsl(0, 80%, 50%)"); // {h: 0, l: 0.5, s: 0.8, opacity: 1}
4.0中颜色解析能力更强,d3.rgb,d3.hsl,d3.lab,d3.hcl和d3.cubehelix总是返回输入颜色转化为相应的颜色空间后的副本。使用color.rgb来替换掉rgb.hsl,来进行不同空间颜色转化。
*/
//d3.drag /*
拖拽行为d3.behavior.drag被重命名为d3.drag。drag.origin由
drag.subject替代用以定义拖拽的起始参考点。这在使用Canvas画布时非常有用,
因为拖拽对象共享一个Canvas元素(在SVG中拖拽的元素都是独立的DOM元素),比如拖拽圆的例子
*/
/*
在3.x中使用字符串来定义过渡类型,然后将这些字符串传入d3.ease或transition.ease。
在4.0中通过定义符号来设置过渡类型。比如d3.easeCubicInOut.。
*/
/*
d3.layout.force被重命名为d3.forceSimulation。
新的力导向仿真使用速度Verlet算法而不是位置Verlet算法,即追踪节点的位置(node.x,node.y)
和速度(node.vx,node.vy)而不是之前的位置(node.px,node.py)。
*/
/*
d3.scale.linear -> d3.scaleLinear d3.scale.sqrt -> d3.scaleSqrt d3.scale.pow -> d3.scalePow d3.scale.log -> d3.scaleLog d3.scale.quantize -> d3.scaleQuantize d3.scale.threshold -> d3.scaleThreshold d3.scale.quantile -> d3.scaleQuantile d3.scale.identity -> d3.scaleIdentity d3.scale.ordinal -> d3.scaleOrdinal d3.time.scale -> d3.scaleTime d3.time.scale.utc -> d3.scaleUtc 比例尺的刻度与输入范围的顺序一致。比如有一个输入范围降序的比例尺,
生成的刻度也是降序的。这个改变影响了由axes生成的刻度顺序,比如:
d3.scaleLinear().domain([10, 0]).ticks(5); // [10, 8, 6, 4, 2, 0]
*/
D3.js 入门学习(二) V4的改动的更多相关文章
- D3.js 入门学习(一)
一.安装D3.js 1.网络连接 <script src="https://d3js.org/d3.v4.min.js"></script> 2.命令行安装 ...
- d3.js入门学习
个人感觉前端数据可视化是个趋势,并且现在所在公司也是有做这块的项目,虽然我目前还没有接触到公司数据可视化的项目,但是,今后总是要接触的嘛. 今天看了一下公司目前所用的两种数据可视化工具---D3和EC ...
- ReactJS入门学习二
ReactJS入门学习二 阅读目录 React的背景和基本原理 理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法 如何在JSX中如何使用事件 如何在JSX中如何使用 ...
- SpringMVC入门学习(二)
SpringMVC入门学习(二) ssm框架 springMVC 在上一篇博客中,我简单介绍了一下SpringMVC的环境配置,和简单的使用,今天我们将进一步的学习下Springmvc的操作. mo ...
- D3.js 入门教程
最近需要用到d3, 记录下d3的教程 网上搜了几个关于d3的教程 D3.js 入门教程 http://wiki.jikexueyuan.com/project/d3wiki/author.h ...
- d3.js 入门指南
说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需 ...
- d3.js 入门指南 - 仪表盘
D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript文件的后缀通常为.js,所以D3被称为D3.js. ...
- 【 D3.js 入门系列 — 11 】 入门总结
D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...
- 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld
记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...
随机推荐
- 《图说VR入门》——Unity插件DK2使用教程
本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/53339254 作者:car ...
- mfc this指针
知识点 this指针 this指针使用 一.this指针 this指针可以看成是实例化对象的地址.在类成员函数里访问成员变量,其实也隐含使用了this指针. 在 Tdate中this->相当于T ...
- CF 1114 D. Flood Fill
D. Flood Fill 链接 题意: 一个颜色序列,每个位置有一个颜色,选择一个起始位置,每次可以改变包含这个位置的颜色段,将这个颜色段修改为任意一个颜色, 问最少操作多少次.n<=5000 ...
- kali base64命令的使用
1.启动终端 2.输入base64 3.输入需要编码的字符串 4,CTRL+D,结束输入,在屏幕上回显输出结果
- 程序员 vs HR(皮这么一下很开心)
最近网络上一段 HR VS 程序员 的表情包火了 来来来 我们近距离感受下 来源|网络:http://t.cn/RuTKC8B 哈哈哈!大家可以留言说说你们面试时候的趣事 更多内容关注公众号:51re ...
- 在云服务器搭建WordPress博客(一)实现云服务器与域名的绑定
随着云的兴起,越来越多的人选择在云服务器上搭建自己的博客,比较著名的开源博客管理系统当属WordPress了,那么怎么在服务器上搭建WordPress呢? 我们需要让别人能够访问我们的博客,就比如输入 ...
- Qt-网易云音乐界面实现-5 收藏列表,播放列表实现 QListWidget QTableWidget
先上目前完成的内容吧,发现后面越写越多.在看看点击量,心凉凉. 完成了左侧的导航列表,还有就是右下角的播放列表. //创建的歌单 my_Create_Music_List = new QListWid ...
- MySQL数据库引擎、事务隔离级别、锁
MySQL数据库引擎.事务隔离级别.锁 数据库引擎InnoDB和MyISAM有什么区别 大体区别为: MyISAM类型不支持事务处理等高级处理,而InnoDB类型支持.MyISAM类型的表强调的是性能 ...
- SQL Server存储过程用法介绍
存储过程其实就是已预编译为可执行过程的一个或多个SQL语句. 通过调用和传递参数即可完成该存储过程的功能. 前面有介绍过存储过程的一些语法,但是没有详细示例,今天我们来一起研究一下存储过程. 提高性能 ...
- Centos 7 安装Zabbix
一.环境准备与说明: 1.zabbix server 版本:3.4.12 ,https://www.zabbix.com/download 2.zabbix agent版本:3.4.14,https: ...