D3.js V4 : scale - scaleOrdinal

v4 的優點在於API劃分更細緻；
scale 劃分的太細緻了。。只好一步步的寫
[TOC]

---

2017-05-22：
真不知道我寫了些啥。。。錯別字、語義不通；錯了一堆。有時間再改改

---

d3.scaleOrdinal():

API ：

domain
range
unknown
copy
d3.scaleImplicit

domain、range、copy都很好理解。而unknown是什麼呢；

API解釋是：如果指定了指則爲未知的輸入值返回當前比例的輸出值；爲設置（未設置）則有默認值；無需我們操心。但是爲指定時未設置.unknown()時有個bug一下需要提一下；

當沒有未知輸入值的時候；萬事大吉。。unknown不會影響什麼；
使用scale(a);a爲domain數組中的元素時並不會出現任何問題；
但是。。。還有但是，當有未知輸入值時 a不是domain數組中的元素時。

//"str"未在domain數組中
console.log(scale("str"))

而又沒有設置unknown;
那麼恭喜了

這個真的可以玩死人的
解決辦法有兩個，而兩個的結果又真的是兩個結果
1 .unknown(num)

這樣的話；svg中就不會出現str這個元素 axis了。因爲之前莫名出現了。。。
2 .range([0,100,200,300,400 ,430 ])
原來的range([0,100,200,300,400]);

就這樣添加到了後面。感興趣的可以試試加在400之前。有驚喜哦；
3.兩者並存時。。。也是奇葩，上圖座標軸。。str消失

順便一提。。總有人會這樣的

var scale = d3.scaleOrdinal()
.domain(data)
.range(array)
.unknown()

而結果是這樣

代碼：
https://bl.ocks.org/lhstock/42dd070c79eeeac494d31712bf99f43f

---

scaleBand():

首先要先了解API中各部分的名稱

API

domain
range ：設置輸出範圍
round ：是否取整
rangeRound ： 整合range and round
paddingInner ： 設置paddingInner 【0，1】
paddingOuter ： 設置paddingOuter 【0，1】
padding：整合paddingInner and paddingOuter
align ： 設置刻度位置 默認0.5 範圍【0，1】
bandwidth ：獲取bandwidth
step ： 獲取step
僅僅只是細化了API；padding、align 感覺不錯

---

scalePoint:

和scaleBand差不多一樣，只不過沒有bandwidth了
API 也缺少了paddingInner and paddingOuter ；僅可使用padding 設置內外padding;

---

schemeCategory10 | 20 | 20b |20c:

category10 | 20 | 20b |20c 曾經是歸類在顏色比例尺中的。但實際使用確實是序數比例尺的用法。只不過range是色值；
v4在這裏歸類到序數比例中。而曾經的直接返回比例尺也變成了返回色值數組；官方給出的用法：

var color = d3.scaleOrdinal(d3.schemeCategory10);
//d3.scaleOrdinal([range]);
//添加【range】除了使用.range()外也可以在.scaleOrdinal()中作爲參數；
//而實際使用一般是用做序數比例。只需再添加.domain()就好了
color.domain(["tang","song","yuan","ming","qing"]);
color("tang")//即可返回色值；
//當然不添加domain也可以；但是一般是在是在function(d){color(d)}中調用，倘若在此之前調用了color("唐")，則比例中的顏色則已經分配出去；這樣怎麼看都是不嚴謹的

---