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]
*/
上一篇:sqlplus相关命令


下一篇:d3 bubble源码分析