用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轴的刻度按月分布，使用