[英]How to give a better Y axis label / scale in d3 chart?
我有一個實時動畫折線圖。
Y軸域將根據傳入的最大數據在每個時間間隔更新
y.domain([0, d3.max(data)]);
然后我按照以下方式更新Y軸標簽
svg.selectAll("g.y.axis")
.interrupt()
.transition()
.duration(duration)
.ease("linear")
.call(y.axis = d3.svg.axis().scale(y).orient("left"));
折線圖的寬度很小,我將其設置為90
因此,由於空間不足,標簽看起來會有些奇怪,如下所示:
圖片1:
而且看起來像這樣
圖片2
有什么選擇可以更好地縮放標簽?
在圖1中的示例中,間隔標簽可以更新為[0, 2, 4, 6, ... 10, 12]
而不是[0, 1, 2, 3, 4 ... 10, 11, 12]
在圖2中的示例中,間隔標簽可以更新為[0, 4, 8, 12, ... 20, 24]
而不是[0, 2, 4, 6, 8 ... 20, 22, 24]
您可以使用軸上的ticks(number)
方法來告訴它繪制更少的刻度。 默認設置為繪制大約10個刻度。 調整了實際的刻度數,以獲取刻度值之間的整數間隔,這就是為什么使用默認行為獲得12個刻度的原因。
您要使用的情況
y.axis = d3.svg.axis().ticks(6).scale(y).orient("left")
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.