D3.js趋势线X轴年份显示异常问题求助

我来帮你搞定这个X轴显示不对的问题！核心原因是你用了时间比例尺（d3.scaleTime()），但没有把年份数字转换成D3能识别的Date对象，导致比例尺无法正确解析年份，所以才会显示奇怪的数字。

下面是具体的修复步骤和修改后的代码：

1. 修正年份解析逻辑 #

首先，你定义了parseTime但既没用到，还写错了格式符：%y是解析2位年份（比如"00"对应2000），而你的数据是4位年份（比如"2000"），应该用%Y（大写Y）。然后在加载数据时，把年份字符串转换成Date对象。

2. 修改数据处理代码 #

在d3.tsv的数据转换回调里，把原本的d.ano = d.ano;替换成解析后的Date对象。

修改后的完整代码 #

<!DOCTYPE html>
<title>Plotting a Trendline with D3.js</title>
<svg width="960" height="500"></svg>
<script src="d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// 修正：用%Y解析4位年份
var parseTime = d3.timeParse("%Y");

var x = d3.scaleTime()
    .rangeRound([0, width]);

var y = d3.scaleLinear()
    .rangeRound([height, 0]);

var line = d3.line()
    .x(function(d) { return x(d.ano); })
    .y(function(d) { return y(d.total); });

d3.tsv("data.tsv", function(d) {
  // 修正：把年份字符串转换成Date对象
  d.ano = parseTime(d.ano);
  d.total = +d.total;
  return d;
}, function(error, data) {
  if (error) throw error;

  x.domain(d3.extent(data, function(d) { return d.ano; }));
  y.domain(d3.extent(data, function(d) { return d.total; }));

  g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
    .select(".domain")
      .remove();

  g.append("g")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Numero de acidentes mortais");

  g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", line);
});
</script>

额外说明 #

如果你不想用d3.timeParse，也可以直接通过年份数字创建Date对象，比如把数据处理行改成：

d.ano = new Date(+d.ano, 0, 1); // +d.ano把字符串转成数字，0代表1月，1代表1号

效果是一样的，都是给时间比例尺提供合法的Date类型值，这样X轴就能正确识别并显示年份刻度了。

内容的提问来源于stack exchange，提问作者Knocktorius Maxima