用D3.js进行医疗数据可视化 （三）坐标轴 (Axes)

介绍

这这篇文章中，我们来尝试一下改进坐标轴的呈现方式。所有的代码都是在之前使用D3.js进行医疗数据可视化的一些实践 （二）中的代码基础上改的。因此这儿只把相应改动的代码贴出来。

 

任务一：让X轴的刻度以及相应的网格按月分布，并将刻度值改成中文

可视化效果

 

代码

var xAxis = d3.svg.axis()
                .scale(_x.range([0, quadrantWidth()]))
                .orient("bottom")
                .tickFormat(d3.time.format("%y年%m月"))  //set tick name in Chinese
                .ticks(d3.time.months, 1);  //set ticks for x axis as monthly

讨论

d3.svg.axis() [1]有好几个调整ticks的API。这儿为了让X轴的刻度按月分布，使用了axis().ticks(d3.time.months,1)。同样如果想按不同的时间间隔，D3提供了多种d3.time的API供选择。

改变X轴刻度值是通过调用axis().tickFormat(d3.time.format("%y年%m月"))完成的。这儿也体现了D3的灵活性，tickFormat可以接受一个函数作为规定刻度值呈现方式的方法。最重要的是，这个函数可以自己实现！

 

任务二：显示坐标轴名字

可视化效果

 

代码

d3.select("g.x.axis")   //add label for x axis
        	.append("text")
            .attr("class", "axislabel")
            .attr("text-anchor", "end")
            .attr("x", quadrantWidth)
            .attr("y", 30)
            .text("日期");

d3.select("g.y.axis")   //add label for y axis
	     	.append("text")
	        .attr("class", "axislabel")
	        .attr("text-anchor", "start")
	        .attr("x", -_margins.left)
	        .attr("y", -6)
	        .text("诊疗人次数（万人次）");

讨论

D3没有现成的方法显示坐标轴名字，所以需要我们自己创建一个<text>元素放置名字。唯一的关键就是要放对地方。比如上述实现中X轴的名字放在X轴的右下角，那么就需要设置相应的text-anchor, x, y值。Y轴的名字同理。

相应的布局示意如下。

 

 

任务三：旋转X轴刻度值

可视化效果

 

代码

d3.selectAll("g.x g.tick text")
        	.attr("x", -24)
        	.attr("transform", "rotate(-30)"); 

讨论

这个方法可以改进刻度值的显示方式，特别是当图表的宽度不够而刻度值又无法缩减时，会起到很好的效果。

参考文献

1.    SVGAxes. https://github.com/mbostock/d3/wiki/SVG-Axes