Can't decrease number of ticks in axisBottom

问题

I'm trying to create some bar chart with the U.S. GDP growth. In the x axis, all the YYYY-MM-DD values are shown even though I explicitly set .call(d3.axisBottom(x).ticks(10); What should I do? I tried it with d3.timeYear.every(25) too.

Here's my code:

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

回答1:

You have two problems here. First, you are using a band scale, and d3.timeYear.every(25) will have no effect. But, on top on that, you're using that d3.timeYear.every(25) inside a ticks function, and that won't work.

According to the API:

This method has no effect if the scale does not implement scale.ticks, as with band and point scales. (emphasis mine)

Thus, a possible solution is filtering the band scale's domain inside a tickValues function.

In this example, I'm filtering one tick out of every 20. Also, I'm splitting the string to show only the year:

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

Here is your code with that change:

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

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

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

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

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).tickValues(x.domain().filter(function(d, i) {
      return !(i % 20);
    })).tickFormat(function(d) {
      return d.split("-")[0]
    }))

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

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="600" height="400"></svg>

来源：https://stackoverflow.com/questions/44224246/cant-decrease-number-of-ticks-in-axisbottom