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。也许这样的事情会起作用，但你必须弄清楚你希望你的功能有多优雅。我写了一个快速的＃34;没有思想添加＆＃34;格式化程序，但你可能想要考虑一下：

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

更改数据点以查看它切换比例。

D3格式天数到年

1 个答案: