D3格式天到年

Question

我有一個X軸，它正在顯示基於數據範圍的天數。由於天數非常大，因此改爲創建自定義格式化程序以顯示年數日期會很有幫助。

這裏是我當前的X軸和規模：

var xScale = d3.scale.linear() 
     .domain([0, d3.max(data, function(d) { return d["ttc"]; })]) 
     .range([padding, w-padding]) 
     .nice(); 

    var xAxis = d3.svg.axis() 
     .scale(xScale) 
     .orient('bottom') 
     .ticks(5); 

我的域名目前像[0, 9,000]天。我希望這些可以在幾年或幾個月內顯示出來。我怎樣才能做到這一點？

Answer 1

如果你正在處理相對時間，只有你知道單位，你必須寫一個custom formatter。也許這樣的事情會起作用，但你必須弄清楚你希望你的功能有多優雅。我寫了一個快速的「無以爲添加」格式，但你可能會想要把一些想法進去：

var ..., 
max = xRange.domain()[1], 
xAxis = d3.svg.axis() 
    .scale(xRange) 
    .tickSize(5) 
    .tickFormat(function (days) { 
     if (max < 50) { 
     return d3.format("2.1f")(days) + " d"; 
     } 
     else if (max >= 50 && max < 100) { 
     return d3.format("2.1f")(days/7) + " w"; 
     } 
     else if (max >= 100 && max < 500) { 
     return d3.format("2.1f")(days/(365/12)) + " m"; 
     } 
     else if (max >= 500){ 
     return d3.format("2.1f")(days/365) + " y"; 
     } 
    } 
) 

這裏是一個簡單的，醜陋的，演示，以證明這一點：plunker

更改數據點以查看切換比例。