使用点对象/数组绘制SVG路径：示例失效及路径创建求助

嘿，我太懂这种看着示例代码跑不起来的挫败感了——尤其是你正专注于绘制MLB球场SVG的时候，卡在path对象创建这一步真的很闹心。先别着急，我来帮你排查问题，一步步解决。

首先，你给出的代码片段只写到了accessor function的开头，这大概率是问题的核心之一——代码不完整。结合这类D3生成SVG路径的常见写法，我先帮你补全可运行的完整代码，再拆解关键问题：

// 先确保CodePen的JS设置里已经引入D3库（比如添加CDN：https://d3js.org/d3.v7.min.js）
// 你的线数据
var lineData = [ 
  { "x": 1, "y": 5}, 
  { "x": 20, "y": 20}, 
  { "x": 40, "y": 10}, 
  { "x": 60, "y": 40}, 
  { "x": 80, "y": 5}, 
  { "x": 100, "y": 60}
];

// 第一步：创建SVG容器，定义画布尺寸
var svg = d3.select("body")
  .append("svg")
  .attr("width", 120)
  .attr("height", 70);

// 第二步：设置比例尺，把数据坐标映射到SVG像素坐标
// SVG的y轴是从上到下的，所以y比例尺要反转范围
var xScale = d3.scaleLinear()
  .domain([0, 100]) // 数据中x的取值范围
  .range([0, 120]); // 对应SVG画布的x像素范围

var yScale = d3.scaleLinear()
  .domain([0, 60]) // 数据中y的取值范围
  .range([70, 0]); // 反转后，数据y=0对应SVG顶部，y=60对应底部

// 第三步：定义线生成器，设置accessor函数（你之前没写完的部分）
var lineGenerator = d3.line()
  .x(function(d) { return xScale(d.x); })
  .y(function(d) { return yScale(d.y); });

// 第四步：创建path元素并绑定数据
svg.append("path")
  .datum(lineData) // 将整个数组绑定到path上
  .attr("d", lineGenerator) // 用线生成器生成path的核心d属性
  .attr("fill", "none") // 线条不需要填充
  .attr("stroke", "#000") // 设置线条颜色
  .attr("stroke-width", 2); // 设置线条粗细

你可能踩的几个坑： #

• 没引入D3库：CodePen默认不会自带D3，必须在「Settings > JavaScript」里添加D3的CDN链接（推荐用v7版本，兼容性好）。
• 代码不完整：你提供的片段只定义了数据和accessor的开头，缺少了创建SVG容器、比例尺、线生成器以及实际挂载path的关键步骤。
• SVG坐标方向误区：SVG的原点在左上角，y轴向下延伸，如果直接用原始数据的y值，线条会倒过来，所以必须用比例尺反转y轴的映射范围。
• 数据与画布尺寸不匹配：如果数据的x/y范围超出SVG的宽高，线条会被截断，所以要确保比例尺的domain（数据范围）和range（画布像素范围）对应。

针对MLB球场SVG的额外提示： #

如果是绘制球场的复杂路径（比如本垒板、垒包、外野墙），可以把球场的关键坐标整理成类似的数组，用线生成器（d3.line）绘制直线段，用弧生成器（d3.arc）绘制曲线部分（比如外野墙的弧形）。记得根据实际球场的比例调整比例尺，让整个球场在SVG容器里显示协调。

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