用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