如何在D3中更改x轴的标签

Question

I want to make the labels of the x-axis are based on year dates. Here is my code:

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);

However, this is how my x-axis looks like this instead:

I want to know how to change the labels to year dates.

Answer 1

Chain this method tickFormat(d3.format("d")) where you are preparing xAxis ie:-

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

See working CodePen here

And here is the running snippet:

 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>