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, ...
随机推荐
- WPF设置全局字体和字体嵌入
原文:WPF设置全局字体和字体嵌入 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/CLeopard/article/details/40590373 ...
- 【HNOI2011】卡农
题面 题解 将无序化为有序,最后答案除以$m!$. 设$f[i]$表示选出了$i$个子集,并且满足所有的限制的方案数. 因为转移困难,所以考虑容斥 限制了每个数的出现次数为偶数,所以如果前$i - 1 ...
- JNDI是什么,怎么理解
JNDI 是什么 JNDI是 Java 命名与目录接口(Java Naming and Directory Interface),在J2EE规范中是重要的规范之一,不少专家认为,没有透彻理解JNDI的 ...
- Famous框架系列一:famous/core/Surface
famous/core/Surface 既然是Famous的第一篇文章,就先给Famous打个广告:http://periodic.famo.us Famous12年的作品,点击右下角Fun thi ...
- 流行创意风格教师求职简历免费word模板
18款流行创意风格教师求职简历免费word模板,也可用于其他专业和职业,个人免费简历模板,个人简历表免费,个人简历表格. 声明:该简历模板仅用于个人欣赏使用,请勿用于商业用途,谢谢. 下载地址:百度网 ...
- Python之元类详解
一.引子 元类属于Python面向对象编程的深层魔法,99%的人都不得要领,一些自以为搞明白元类的人其实也是自圆其说,点到为止,从队元类的控制上来看就破绽百出,逻辑混乱: 二.什么是元类 一切源自于一 ...
- RenderSprite小记
类型定义: /** @private */ public static const IMAGE:int = 0x01; /** @private */ public static const ALPH ...
- AtCoder | ARC103 | 瞎讲报告
目录 ARC 103 A.//// B.Robot Arms C.Tr/ee D.Distance Sums ARC 103 窝是传送门QwQ A.//// 题意 : 给你\(n\)(\(n\)为偶数 ...
- BP神经网络算法推导
目录 前置知识 梯度下降法 激活函数 多元复合函数求偏导的相关知识 正向计算 符号定义 输入层 隐含层 输出层 误差函数 反向传播 输出层与隐含层之间的权值调整 隐含层与输入层之间权值的调整 计算步骤 ...
- so easy, too happy
一.预估与实际 PSP2.1 Personal Software Process Stages 预估耗时(分钟) 实际耗时(分钟) Planning 计划 • Estimate • 估计这个任务需要多 ...