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来获取坐标的嘛。