Question

我的d3图表的日期是月/日/年，例如：＆＃34; 10/1/2013＆＃34;

我正在以这种方式解析它们：d3.time.format（＆＃34;％x＆＃34;）。parse;

但是如何在我的轴上编写一个.tickFormat（）方法来仅显示年份（全年，以世纪为单位）？

Answer 1

只需在解析代码段中将%x更改为%Y。

您可以在https://github.com/mbostock/d3/wiki/Time-Formatting

找到完整的文档

这样的事情：

tickFormat: function(d) {
      var dx = data[0].values[d];
      return dx ? d3.time.format('%Y')(new Date(dx)) : '';
}

当然，您获取数据的具体位置会有所不同。

Answer 2

定义x轴时，可以使用tickformat修改它，并传入一个函数来返回年份。

这是一个完整的例子。

var width = 200, height = 200;
var data = ["10/1/2013", "10/1/2014"].map(d3.time.format("%x").parse)
var xDomain = [Math.min.apply(null, data), Math.max.apply(null, data)];
var x = d3.time.scale().range([0, width]).domain(xDomain)
var xAxis = d3.svg.axis()
    .scale(x).tickFormat(function(time, index) { return time.getUTCFullYear()); })
var svg = d3.select("body").append("svg")
    .attr('width', 200)
    .attr('height', 200);
svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + 180 + ")")
      .call(xAxis);

要注意的关键行是我们指定xAxis的tickformat的地方：

var xAxis = d3.svg.axis()
    .scale(x).tickFormat(function(time, index) { return time.getUTCFullYear()); })

请注意，我们使用var x中已解析的时间指定xDomain的域。

D3：tickformat方法只显示年份

2 个答案: