Javascript Can'；t减少axisBottom中的记号数

我试图用美国GDP的增长来制作一些条形图。在x轴中，显示所有YYYY-MM-DD值，即使我明确设置了

.call（d3.axisBottom（x）.ticks（10）；

我该怎么办？我也用

d3.timeYear.every（25）

进行了尝试。

这是我的密码：

var url = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json"; 

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
    y = d3.scaleLinear().rangeRound([height, 0]);

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json(url, function(error, data) {
  if (error) throw error;


  x.domain(data.data.map(function(d) { return d[0]; }));
  y.domain([0, d3.max(data.data, function(d) { return d[1]; })]);

  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x).ticks(d3.timeYear.every(25)));

  g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y).ticks(10))
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("font-size", "30px")
      .attr("font-color", "black")
      .attr("dy", "7.71em")
      .attr("text-anchor", "end")
      .text("Frequency");

  g.selectAll(".bar")
    .data(data.data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d[0]); })
      .attr("y", function(d) { return y(d[1]); })
      .attr("width", x.bandwidth())
      .attr("height", function(d) { return height - y(d[1]); });
});

---

这里有两个问题。首先，你使用的是波段刻度，而

d3.timeYear。每（25）

一次都没有效果。但最重要的是，你在

函数中使用的是
d3.timeYear。每（25）
一次都会滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答滴答不响

根据报告：

如果刻度未实现scale.ticks，则此方法无效，如带刻度和点刻度

因此，一种可能的解决方案是在
tickValues
函数中过滤频带标度的域

在本例中，我将从每20个勾号中筛选一个。此外，我将拆分字符串以仅显示年份：

d3.axisBottom(x).tickValues(x.domain().filter(function(d, i) {
    return !(i % 20);
})).tickFormat(function(d) {
    return d.split("-")[0]
});

以下是更改后的代码：


var url=”https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json";
var svg=d3。选择（“svg”），
保证金={
前20名，
右:10,，
底数：30，
左：50
},
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom；
var g=svg.append（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var x=d3.scaleBand（）.range（[0，width]）。padding（0.1），
y=d3.scaleLinear（）.rangeRound（[height，0]）；
json（url、函数（错误、数据）{
如果（错误）抛出错误；
x、 域（data.data.map）（函数（d）{
返回d[0]；
}));
y、 域（[0，d3.max（data.data，function（d））{
返回d[1]；
})]);
g、 附加（“g”）
.attr（“类”、“轴--x”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x）.tickValues（x.domain（）.filter）（函数（d，i）{
返回！（i%20）；
})).d格式（函数（d）{
返回d.split（“-”[0]
}))
g、 附加（“g”）
.attr（“类”、“轴--y”）
.呼叫（d3.左（y）.滴答声（10））
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“字体大小”，“30px”）
.attr（“字体颜色”、“黑色”）
.attr（“dy”，“7.71em”）
.attr（“文本锚定”、“结束”）
.文本（“频率”）；
g、 选择全部（“.bar”）
.数据（数据.数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{
返回x（d[0]）；
})
.attr（“y”，函数（d）{
返回y（d[1]）；
})
.attr（“宽度”，x.带宽（））
.attr（“高度”，功能（d）{
返回高度-y（d[1]）；
});
})；
“我该怎么办？”共享您的代码。@GerardoFurtado我添加了代码