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