javascript - 如何应用时间尺度并以 "n"年为间隔显示我的数据？

Question

我需要为 x 轴使用时间刻度来表示年份。它可能加载和显示时需要使用时间解析/格式化年数据。如果每年都显示，轴会人满为患值，所以我想将 x 轴刻度设置为每 3 年显示一个刻度。

怎么做到的？

这是我的实时代码:

https://plnkr.co/edit/qOqvG5T0yb0P4TbW6Kv6?p=preview

d3.dsv(",", "data.csv").then(function (data) {
  console.log(data);


  // Scale the range of the data in the domains
  x.domain(data.map(function (d) { return d.year; }));
  y.domain([0, d3.max(data, function (d) { return d.running_total; })]);

  // append the rectangles for the bar chart
  svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function (d) { return x(d.year); })
    .attr("width", x.bandwidth())
    .attr("y", function (d) { return y(d.running_total); })
    .attr("height", function (d) { return height - y(d.running_total); });

  // add the x Axis
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

  // add the y Axis
  svg.append("g")
    .call(d3.axisLeft(y));

Answer 1

除了改变比例...

var x = d3.scaleTime()

...和域名...

x.domain(d3.extent(data, function (d) { return d.year; }));

...这里的重要部分是使用 interval.every设置刻度之间的间隔。

例如，每 10 年一次跳动:

d3.axisBottom(x).ticks(d3.timeYear.every(10))

这是更新的 Plunker:https://plnkr.co/edit/aSHJ6cIZyb0h1st1mX5w?p=preview

---

PS:您应该不使用时间作为变量的条形图(条形图)。这不是条形图的目的。例如，您会遇到条宽问题(在 Plunker 中我将其设置为 10 像素)。在这里看看我的解释:https://stackoverflow.com/a/48279536/5768908