D3.js Scale 和Axis

這兩天在封裝座標軸控件，好像就涉及了d3.scale和d3.axis.看似簡單，但是問題還是有的。
首先控件控件。就是要可選。

scale

比例尺分了三塊。數值、序數、時間
首先弄序數比例尺，
序數比例尺又分了三種輸出域API。
.range （array）一對一對應。
rangePoints || rangeRoundPoints（array，n） 簡單理解就是節點爲點。 起始可留空餘；
n: 可選參數，默認0；做什麼的呢？看公式

參數說明：
常數 L : 預設軸長; array.length; n: 可選參數
求出 W:間隔 s : 起點 e : 終點
公式 :

W = L / (array.length -1) + n
s = W * n /2 ;
e = L - s(簡化：前後相等);
刻度座標 = s + i * W
這個還好理解，就是在已有的刻度上加上n個刻度得到的間隔

rangeBands || rangeRoundBands（array，padding,outPadding） 簡單理解就是節點爲一段寬度（可讀寬度，應該適用於直方圖）。 起始可留空餘；

padding,outPadding默認爲0 ，依舊看公式，算了半天啊
參數說明：
常數 L : 預設軸長; array.length; p、o: 可選參數,範圍0-1；
求出 W:步長 s : 起點 e : 終點
公式 :

S = L / (array.length-p + 2*o)
s = S * o
e = L -s
rangeBand：獲取節點寬度；實際爲 W * （1-p）,也可以理解爲步長 = 寬度+間隔 ，p爲間隔所佔比例
* 參數設置越界返回值也爲0哦*
刻度座標 = s + i * S
p,o 不好簡單的判斷適合值；封裝時決定寫死一個適合的值0.5（使間隔= 寬度），免得鬧心

數值
待

時間
待

axis

換種寫法。
axis活用：用作背景刻度線

scatterplot.grid_x = scatterplot.g_grid_x_axis.call(d3.svg.axis().scale(scatterplot.axis_x_scale).innerTickSize(-(scatterplot._height - 100)))
    scatterplot.grid_x.selectAll(".tick").selectAll("text").remove();
    scatterplot.grid_x.selectAll(".domain").remove()
    scatterplot.grid_x.selectAll("line")
        .attr("stroke-opacity", scatterplot._showbackground_x ? 1 : 0)
        .style( "stroke-dasharray",  [2,1])
scatterplot.grid_y = scatterplot.g_grid_y_axis.call(d3.svg.axis().scale(scatterplot.axis_y_scale).innerTickSize(-(scatterplot._scatterplot_axis_x_length)).orient("left"))
    scatterplot.grid_y.selectAll(".tick").selectAll("text").remove();
    scatterplot.grid_y.selectAll(".domain").remove()
    scatterplot.grid_y.selectAll("line")
        .style("stroke-opacity", scatterplot._showbackground_y ? 0.5 : 0)
        .style( "stroke-dasharray", [2,1])
}

深入

探討（懶得傳圖，描述一下）
1.碰到一個季度座標軸。第一季度加年另外三個簡寫。
如 ： 2015年Q1 —Q2—Q3—Q4—2016年Q1—Q2—Q3—Q4
簡單的想了一下，用序數座標軸合適。按固定排序嘛～～，但是無聊嘗試了一下，發現了一個問題
d3.range是經過重複處理的。也就是不能繪製重複的Q2—Q3—Q4；
簡單的解決都加上年就好了，可是需求嘛有時候就是那麼蛋疼，玩意非要這樣呢。那怎麼辦。嘗試了一下方法都無法解決。最後想着難不成只能自行繪製？看樣子目前的水平只能這樣了。糾結一番還是有收穫的，比如對API的瞭解。axis .tickValues 設置了值如果在 序數Scale中沒有出現還是不會出現哦。因爲是根據scale來獲取座標的嘛。