D3.js 入门学习 V4的改动

Posted 2020-09-19 aGod

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