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

  1. D3.js 入门学习(一)

    一.安装D3.js 1.网络连接 <script src="https://d3js.org/d3.v4.min.js"></script> 2.命令行安装 ...

  2. d3.js入门学习

    个人感觉前端数据可视化是个趋势,并且现在所在公司也是有做这块的项目,虽然我目前还没有接触到公司数据可视化的项目,但是,今后总是要接触的嘛. 今天看了一下公司目前所用的两种数据可视化工具---D3和EC ...

  3. ReactJS入门学习二

    ReactJS入门学习二 阅读目录 React的背景和基本原理 理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法 如何在JSX中如何使用事件 如何在JSX中如何使用 ...

  4. SpringMVC入门学习(二)

    SpringMVC入门学习(二) ssm框架 springMVC  在上一篇博客中,我简单介绍了一下SpringMVC的环境配置,和简单的使用,今天我们将进一步的学习下Springmvc的操作. mo ...

  5. D3.js 入门教程

    最近需要用到d3, 记录下d3的教程 网上搜了几个关于d3的教程 D3.js 入门教程      http://wiki.jikexueyuan.com/project/d3wiki/author.h ...

  6. d3.js 入门指南

    说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需 ...

  7. d3.js 入门指南 - 仪表盘

    D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript文件的后缀通常为.js,所以D3被称为D3.js. ...

  8. 【 D3.js 入门系列 — 11 】 入门总结

    D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...

  9. 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld

    记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...

随机推荐

  1. WPF设置全局字体和字体嵌入

    原文:WPF设置全局字体和字体嵌入 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/CLeopard/article/details/40590373 ...

  2. 【HNOI2011】卡农

    题面 题解 将无序化为有序,最后答案除以$m!$. 设$f[i]$表示选出了$i$个子集,并且满足所有的限制的方案数. 因为转移困难,所以考虑容斥 限制了每个数的出现次数为偶数,所以如果前$i - 1 ...

  3. JNDI是什么,怎么理解

    JNDI 是什么 JNDI是 Java 命名与目录接口(Java Naming and Directory Interface),在J2EE规范中是重要的规范之一,不少专家认为,没有透彻理解JNDI的 ...

  4. Famous框架系列一:famous/core/Surface

    famous/core/Surface 既然是Famous的第一篇文章,就先给Famous打个广告:http://periodic.famo.us  Famous12年的作品,点击右下角Fun thi ...

  5. 流行创意风格教师求职简历免费word模板

    18款流行创意风格教师求职简历免费word模板,也可用于其他专业和职业,个人免费简历模板,个人简历表免费,个人简历表格. 声明:该简历模板仅用于个人欣赏使用,请勿用于商业用途,谢谢. 下载地址:百度网 ...

  6. Python之元类详解

    一.引子 元类属于Python面向对象编程的深层魔法,99%的人都不得要领,一些自以为搞明白元类的人其实也是自圆其说,点到为止,从队元类的控制上来看就破绽百出,逻辑混乱: 二.什么是元类 一切源自于一 ...

  7. RenderSprite小记

    类型定义: /** @private */ public static const IMAGE:int = 0x01; /** @private */ public static const ALPH ...

  8. AtCoder | ARC103 | 瞎讲报告

    目录 ARC 103 A.//// B.Robot Arms C.Tr/ee D.Distance Sums ARC 103 窝是传送门QwQ A.//// 题意 : 给你\(n\)(\(n\)为偶数 ...

  9. BP神经网络算法推导

    目录 前置知识 梯度下降法 激活函数 多元复合函数求偏导的相关知识 正向计算 符号定义 输入层 隐含层 输出层 误差函数 反向传播 输出层与隐含层之间的权值调整 隐含层与输入层之间权值的调整 计算步骤 ...

  10. so easy, too happy

    一.预估与实际 PSP2.1 Personal Software Process Stages 预估耗时(分钟) 实际耗时(分钟) Planning 计划 • Estimate • 估计这个任务需要多 ...