D3最佳实践:003 坐标轴

D3学习系列3 坐标系可以用于定量、时序、定序的数据缩放。

很多的数据可视化绘图需要放在坐标系中,常用的有直角坐标系和极坐标系,本文介绍直角坐标系的用法。

直角坐标系在SVG中无非带有一些刻度装饰的两条线,一条竖直,一条水平,在D3中,这两条线的模型区别主要在于朝向(orient)不同,其他的模型特征都一样。在D3中声明X轴和Y轴的坐标非常简单,如下:

var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y).orient("left");

坐标轴是实际的数据和绘图尺寸的映射标尺,所以坐标轴也需要使用缩放工具来完成实际数据和绘图刻度的映射,在D3中只需要把事先声明好的x方向的缩放和y方向的缩放设置到相应的坐标轴中就可以事先坐标轴刻度与实际数据的对应了。

坐标的朝向可以设置四个方向:left,right,top,bottom,这四个方向指定的实际是坐标的刻度相对于坐标轴的位置,由于left和right位置的坐标刻度只能是处于Y坐标轴的两侧,而top和bottom位置的坐标刻度只能处于X坐标轴的两侧,所以,可以使用这四个方向来区别x坐标轴和y坐标轴。

坐标轴的刻度是坐标度的重要组成部分,在D3中,有专门的设置坐标轴的一系列方法:

xAxis.ticks().tickSize([10,20]).tickPadding(5).format(function(v){
	return "$"+v;
});

tickSize设置了innerSize和outSize,innerSize设置了坐标刻度距离坐标轴的距离,outSize设置了the length of the square ends of the domain path, offset from the native position of the axis.tickPadding设置了坐标刻度和坐标标签之间的距离。format可以设定坐标标签的形式。

Jeff Lee /
Published under (CC) BY-NC-SA in categories 可视化  tagged with 坐标  D3