D3.js散点图数据点全部集中在X轴左侧问题排查与求解

所有散点聚集在X轴最左侧的直接原因是数据类型未做转换：d3.csv() 默认会把CSV中所有字段解析为字符串格式，你直接将字符串类型的Day字段传入时间比例尺d3.scaleTime()时，比例尺无法识别字符串格式的日期输入，所有无效值都会被映射到X轴值域的起点（即x坐标为0的位置），最终表现为所有点堆叠在2021年1月1日的刻度位置。
注意Y轴对应的Nr_of_changes字段目前也是字符串类型，虽然当前数值范围巧合没有出现明显错位，但后续做数值计算、交互时会触发异常，建议同步做类型转换。

在加载完CSV数据后，先对字段做类型转换，再执行比例尺初始化和图形绘制逻辑。核心修改是引入d3.timeParse解析日期字符串为标准JS Date对象，同时将激活量字段转为数值类型，修改后的核心代码如下：

d3.csv("你的CSV文件地址", function(data) {
  // 初始化日期解析器，匹配CSV内YYYY-MM-DD格式的日期
  const parseDate = d3.timeParse("%Y-%m-%d");
  // 批量转换字段类型
  data.forEach(item => {
    item.Day = parseDate(item.Day);
    item.Nr_of_changes = Number(item.Nr_of_changes);
  });

  // 后续X轴、Y轴、散点绘制逻辑保持原有写法即可
  var x = d3.scaleTime()
    .domain([new Date("2021-01-01"), new Date("2022-05-31")])
    .range([0, width]).nice();
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

  var y = d3.scaleLinear()
    .domain([0, 12000])
    .range([height, 0]);
  svg.append("g")
    .call(d3.axisLeft(y));

  var color = d3.scaleOrdinal()
    .domain(["Americas", "Europe", "Asia"])
    .range([ "red", "blue", "yellow"])

  var myCircle = svg.append('g')
    .selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
      .attr("cx", function (d) { return x(d.Day); } )
      .attr("cy", function (d) { return y(d.Nr_of_changes); } )
      .attr("r", 8)
      .style("fill", function (d) { return color(d.Customer) } )
      .style("opacity", 0.5);
})

• 无需手动硬编码比例尺值域，可直接基于转换后的数据自动计算范围，后续数据更新时无需手动调整参数：
  • X轴值域替换为 x.domain(d3.extent(data, d => d.Day)).nice()
  • Y轴值域替换为 y.domain([0, d3.max(data, d => d.Nr_of_changes)]).nice()
• 如果CSV内存储的日期格式与YYYY-MM-DD不一致（比如用/分隔日期、附带时分秒），对应调整d3.timeParse()传入的格式字符串即可。

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