Question

我试图创建一些美国GDP增长的条形图。在x轴上，即使我明确设置.call(d3.axisBottom(x).ticks(10);，我也会显示所有YYYY-MM-DD值。我该怎么办？我也尝试了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]); });
});

Answer 1

这里有两个问题。首先，您使用的是波段，d3.timeYear.every(25)无效。但是，最重要的是，您在d3.timeYear.every(25)函数中使用了ticks，并且无法正常工作。

根据API：

如果比例没有实现scale.ticks，则此方法无效，如 band 和点比例。（强调我的）

因此，一种可能的解决方案是在tickValues函数内过滤带范围的域。

在这个例子中，我过滤了每20个中的一个。另外，我将字符串拆分为仅显示年份：

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

以下是您更改的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

无法减少axisBottom中的刻度数

1 个答案: