无法减少axisBottom的刻度数 [英] Can't decrease number of ticks in axisBottom

问题描述

我正在尝试通过美国GDP增长创建一些条形图.即使我显式设置了 .call(d3.axisBottom(x).ticks(10); )，在x轴上也会显示所有YYYY-MM-DD值，我该怎么办?也与 d3.timeYear.every(25)一起使用.

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.

这是我的代码:

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.every(25)将无效.但是，最重要的是，您在 ticks 函数中使用了 d3.timeYear.every(25)，但这是行不通的.

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.

根据 API :

如果比例尺未实现scale.ticks(如 band 和磅级比例尺)，则此方法无效.(强调我的)

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

因此，一种可能的解决方案是在 tickValues 函数中过滤波段标的域.

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

在此示例中，我每20个过滤一次.此外，我将字符串拆分为仅显示年份:

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>

这篇关于无法减少axisBottom的刻度数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！