D3.js Scale 和Axis
来源:互联网 发布:该域名升级访问中 编辑:程序博客网 时间:2024/06/11 22:55
这两天在封装坐标轴控件,好像就涉及了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来获取坐标的嘛。
- D3.js Scale 和Axis
- D3.js V4 : scale
- d3.js d3.scale.ordinal() --详解 rangeBands
- D3.js中使用scale
- D3.js中的Scale用法
- Learning D3.js(3) 散点图与axis
- 【 D3.js 入门系列 --- 4 】 如何使用scale(比例)
- echart和d3.js
- d3的scale()函数
- d3-groups-axis
- d3.js 简介和安装
- D3 .JS
- d3 js
- d3.js
- d3.js
- D3.js
- d3.js
- d3.js
- DataGridView左键选中行改变行背景色,右键选中行不改变背景色。左键选中行的背景色不变
- phpstorm 2016.2 学习笔记
- LeetCode No.97 Interleaving String
- canvas画正六边形
- AndroidStudio生成自定义的混淆jar包(同时将assets目录打入jar包)(二)(by 星空武哥)
- D3.js Scale 和Axis
- 第一次上这个网站,希望能坚持
- 前端实际应用过程的问题总结
- 格式化输入(scanf)输出(printf)函数
- obs-studio的源
- C语言对字符串的操作
- c语言编程基础知识理解for循环篇
- Android Butterknife 8.4.0 使用方法总结
- Extjs获取JSON数据和遍历集合