如何在 D3 中为每年生成轴刻度？答案

【问题标题】：How do I generate axis tick for every year in D3?如何在 D3 中为每年生成轴刻度？
【发布时间】：2016-09-22 21:59:37
【问题描述】：

如何在 D3 中生成每一年的刻度？

当我的数据跨越几年时，以下代码似乎可以工作，但是当数据只有几年（比如 3 年）时，它会显示几个月？

var xAxisScale  = d3.scaleTime()
    .domain([new Date(min, 0, 1, 0), new Date(max, 0, 1, 0)])
    .rangeRound([100,width])

xAxisScale.ticks(d3.timeYear.every(1));

【问题讨论】：

标签： d3.js axis

【解决方案1】：

您可以在轴生成器中使用tickFormat 显式设置刻度格式::

xAxis.tickFormat(d3.timeFormat("%Y"));

检查sn-p，第一个轴从2000年到2016年，第二个轴从2014年到2016年。第三个是一样的，但ticks(d3.timeYear)每年只保留1个刻度：

var width = 400, height = 200;

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var xAxisScale1 = d3.scaleTime()
    .domain([new Date(2000, 0, 1), new Date(2016, 0, 1)])
    .rangeRound([20,width - 20]);

var xAxisScale2 = d3.scaleTime()
    .domain([new Date(2014, 0, 1), new Date(2016, 0, 1, 0)])
    .rangeRound([20,width - 20]);

var xAxis1 = d3.axisBottom(xAxisScale1);

var xAxis2 = d3.axisBottom(xAxisScale2).tickFormat(d3.timeFormat("%Y"));

svg.append("g").call(xAxis1);

svg.append("g").attr("transform", "translate(0,40)").call(xAxis2);

svg.append("g").attr("transform", "translate(0,80)").call(xAxis2.ticks(d3.timeYear));

&lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;

【讨论】：