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] */