javascript - 如何更改D3中x轴的标签

Question

我想让 x 轴的标签基于年份日期。这是我的代码:

var width = 600;
var height = 600;

var padding = { top: 50, right: 50, bottom: 50, left: 50 };

var dataset = [[2011, 6224], [2012, 7528], [2013, 7756], [2014, 8632], [2015, 6582], [2016, 8704]];

var min = d3.min(dataset, function(d) {
  return d[1];
})
var max = d3.max(dataset, function(d) {
  return d[1];
})

var xScale = d3.scaleLinear()
                .domain([2011, 2016])
                .range([0, width - padding.left - padding.right]);

var yScale = d3.scaleLinear()
                .domain([6000, max])
                .range([height - padding.top - padding.bottom, 0]);

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

var xAxis = d3.axisBottom()
              .scale(xScale);

var yAxis = d3.axisLeft()
                            .scale(yScale);

svg.append('g')
  .attr('class', 'axis')
  .attr('transform', 'translate(' + padding.left + ',' + (height - padding.bottom) + ')')
  .call(xAxis);

svg.append('g')
  .attr('class', 'axis')
    .attr('transform', 'translate(' + padding.left + ',' + padding.top + ')')
    .call(yAxis);

但是，我的 x 轴是这样的:

我想知道如何将标签更改为年份日期。

Answer 1

将此方法链接到您要准备 xAxis 的地方 tickFormat(d3.format("d"))即:-

var xAxis = d3.axisBottom()
                  .scale(xScale).tickFormat(d3.format("d"));

查看工作 CodePen here

这是运行片段:

var width = 600;
var height = 600;

var padding = {
  top: 50,
  right: 50,
  bottom: 50,
  left: 50
};

var dataset = [
  [2011, 6224],
  [2012, 7528],
  [2013, 7756],
  [2014, 8632],
  [2015, 6582],
  [2016, 8704]
];

var min = d3.min(dataset, function(d) {
  return d[1];
})
var max = d3.max(dataset, function(d) {
  return d[1];
})

var xScale = d3.scaleLinear()
  .domain([2011, 2016])
  .range([0, width - padding.left - padding.right]);

var yScale = d3.scaleLinear()
  .domain([6000, max])
  .range([height - padding.top - padding.bottom, 0]);

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

var xAxis = d3.axisBottom()
  .scale(xScale).tickFormat(d3.format("d"));

var yAxis = d3.axisLeft()
  .scale(yScale);

svg.append('g')
  .attr('class', 'axis')
  .attr('transform', 'translate(' + padding.left + ',' + (height - padding.bottom) + ')')
  .call(xAxis);

svg.append('g')
  .attr('class', 'axis')
  .attr('transform', 'translate(' + padding.left + ',' + padding.top + ')')
  .call(yAxis);

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