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("唐")，则比例中的颜色则已经分配出去；这样怎么看都是不严谨的

---