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

我想使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轴是这样的：

---

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

将此方法链接到准备xAxis的位置

tickFormat（d3.format（“d”）

即：

参见工作代码笔

下面是正在运行的代码片段：

var宽度=600；
var高度=600；
变量填充={
前50名，
右:50,，
底数：50，
左：50
};
变量数据集=[
[2011, 6224],
[2012, 7528],
[2013, 7756],
[2014, 8632],
[2015, 6582],
[2016, 8704]
];
var min=d3.min（数据集，函数（d）{
返回d[1]；
})
var max=d3.max（数据集，函数（d）{
返回d[1]；
})
var xScale=d3.scaleLinear（）
.域名（[2011、2016]）
.range（[0，width-padding.left-padding.right]）；
var yScale=d3.scaleLinear（）
.domain（[6000，最大值]）
.范围（[height-padding.top-padding.bottom，0]）；
var svg=d3.select（'body'）
.append（'svg'）
.attr（'width'，width）
.attr（'高度'），高度；
var xAxis=d3.axisBottom（）
.scale（xScale）.tickFormat（d3.format（“d”））；
var yAxis=d3.axisLeft（）
.比例尺（yScale）；
append（'g'）
.attr（'类'，'轴'）
.attr（'transform'，'translate（'+padding.left++'，'+（height-padding.bottom）+'））
.呼叫（xAxis）；
append（'g'）
.attr（'类'，'轴'）
.attr（'transform'，'translate（'+padding.left+'，'+padding.top+'））
.呼叫（yAxis）
在准备xAxis的地方链接此方法
tickFormat（d3.format（“d”）
即：

参见工作代码笔

下面是正在运行的代码片段：


var宽度=600；
var高度=600；
变量填充={
前50名，
右:50,，
底数：50，
左：50
};
变量数据集=[
[2011, 6224],
[2012, 7528],
[2013, 7756],
[2014, 8632],
[2015, 6582],
[2016, 8704]
];
var min=d3.min（数据集，函数（d）{
返回d[1]；
})
var max=d3.max（数据集，函数（d）{
返回d[1]；
})
var xScale=d3.scaleLinear（）
.域名（[2011、2016]）
.range（[0，width-padding.left-padding.right]）；
var yScale=d3.scaleLinear（）
.domain（[6000，最大值]）
.范围（[height-padding.top-padding.bottom，0]）；
var svg=d3.select（'body'）
.append（'svg'）
.attr（'width'，width）
.attr（'高度'），高度；
var xAxis=d3.axisBottom（）
.scale（xScale）.tickFormat（d3.format（“d”））；
var yAxis=d3.axisLeft（）
.比例尺（yScale）；
append（'g'）
.attr（'类'，'轴'）
.attr（'transform'，'translate（'+padding.left++'，'+（height-padding.bottom）+'））
.呼叫（xAxis）；
append（'g'）
.attr（'类'，'轴'）
.attr（'transform'，'translate（'+padding.left+'，'+padding.top+'））
.呼叫（yAxis）
非常感谢！它确实解决了以前显示的问题。我刚刚意识到轴有重复的标签。x轴类似于201120122012201320132014201420152001520162016。我试过，但不知道如何解决这个问题，为什么？非常感谢我明白了！只需要添加.tickValues（[20112012201320142152016]）@gigigi，如果它确实解决了您的问题，那么就接受它作为答案吧！它确实解决了以前显示的问题。我刚刚意识到轴有重复的标签。x轴类似于201120122012201320132014201420152001520162016。我试过，但不知道如何解决这个问题，为什么？非常感谢我明白了！只需添加.tickValues（[20112012201320142152016]）@gigigi，如果它确实解决了您的问题，则接受它作为答案
var xAxis = d3.axisBottom()
                  .scale(xScale).tickFormat(d3.format("d"));