d3.js - 如何在 D3 中生成每年的 Axis 刻度？

Question

如何在 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));

Answer 1

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

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

检查代码片段，第一个轴从 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));

<script src="https://d3js.org/d3.v4.min.js"></script>