D3散点图绘制异常求助：波士顿马拉松数据可视化问题

我之前也碰到过类似的坑——你应该是直接把原始年份数值（比如1897、2017）当成了SVG元素的x坐标来用，这就导致所有点都被定位到了SVG画布的极右侧：毕竟1897这个数值远大于常规SVG的宽度（比如设800px宽的话，x=1897直接就超出画布了），只有把宽度拉到2017px这种极端值才能看到内容，这显然不是合理的处理方式。

核心解决方案是给数据加上比例尺映射，把你的年份范围和成绩范围，分别映射到SVG的可用画布空间里。下面是具体的步骤和示例：

1. 定义基础SVG画布与边距 #

先给SVG设置合理的宽高，同时预留出坐标轴的边距，避免内容贴边：

<svg width="800" height="500" id="marathonChart"></svg>

再用JS定义边距和可绘图区域的实际尺寸：

const svg = document.getElementById('marathonChart');
const margin = { top: 20, right: 30, bottom: 40, left: 50 };
const width = svg.clientWidth - margin.left - margin.right;
const height = svg.clientHeight - margin.top - margin.bottom;

2. 创建数据到画布的比例尺 #

不用复杂的库也能手动实现比例尺，把原始数据范围映射到画布的可用坐标：

// X轴（年份）比例尺：把1897-2017的范围缩放到画布可用宽度
const minYear = 1897;
const maxYear = 2017;
const getXPos = (year) => ((year - minYear) / (maxYear - minYear)) * width + margin.left;

// Y轴（成绩分钟）比例尺：让更好的成绩（小数值）显示在上方
const minTime = /* 你的数据中最小分钟数 */;
const maxTime = /* 你的数据中最大分钟数 */;
const getYPos = (time) => ((maxTime - time) / (maxTime - minTime)) * height + margin.top;

如果用D3这类可视化库的话，直接用内置比例尺会更省心：

const xScale = d3.scaleLinear()
  .domain([1897, 2017])
  .range([0, width]);

const yScale = d3.scaleLinear()
  .domain([maxTime, minTime]) // 反转定义域，让小数值在上方
  .range([height, 0]);

3. 绘制坐标轴 #

用比例尺来定位刻度和线条，替代原始数据值：

// 绘制X轴线条
const xAxisLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
xAxisLine.setAttribute("x1", margin.left);
xAxisLine.setAttribute("y1", height + margin.top);
xAxisLine.setAttribute("x2", width + margin.left);
xAxisLine.setAttribute("y2", height + margin.top);
xAxisLine.setAttribute("stroke", "#333");
svg.appendChild(xAxisLine);

// 每20年添加一个刻度和标签
for (let year = 1900; year <= 2017; year += 20) {
  const tick = document.createElementNS("http://www.w3.org/2000/svg", "line");
  tick.setAttribute("x1", getXPos(year));
  tick.setAttribute("y1", height + margin.top);
  tick.setAttribute("x2", getXPos(year));
  tick.setAttribute("y2", height + margin.top + 5);
  tick.setAttribute("stroke", "#333");
  svg.appendChild(tick);

  const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
  label.setAttribute("x", getXPos(year));
  label.setAttribute("y", height + margin.top + 20);
  label.setAttribute("text-anchor", "middle");
  label.textContent = year;
  svg.appendChild(label);
}

4. 绘制散点 #

遍历你的数据数组，用计算好的坐标定位每个点：

// 假设你的数据格式是[{year: 1897, time: 175}, {year: 1898, time: 172}, ...]
const marathonData = [/* 你的整理好的数据数组 */];

marathonData.forEach(item => {
  const dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  dot.setAttribute("cx", getXPos(item.year));
  dot.setAttribute("cy", getYPos(item.time));
  dot.setAttribute("r", 3);
  dot.setAttribute("fill", "#2ecc71");
  svg.appendChild(dot);
});

这样处理后，不管你把SVG设成800px还是1000px宽，图表都会自动适配到可用空间里，再也不用依赖极端的宽度设置了。

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