v4 的优点在于API划分更细致;
scale 划分的太细致了。。只好一步步的写
[TOC]
2017-05-22:
真不知道我写了些啥。。。错别字、语义不通;错了一堆。有时间再改改
d3.scaleOrdinal():
API :
domain
range
unknown
copy
d3.scaleImplicitdomain、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("唐"),则比例中的颜色则已经分配出去;这样怎么看都是不严谨的