如何在D3中绘制坐标点？代码无输出的问题排查与修复

核心问题 #

1. 数据绑定逻辑错误
   你的JSON是一个数组，每个数组元素是包含coord属性的对象。但代码中使用data(data.coord)，而data本身是数组，不存在coord属性，导致绑定的数据源为空，无法生成任何圆形元素。

2. 坐标取值未使用真实数据
   当前cx和cy的回调函数返回的是元素索引，完全没有用到JSON里存储的坐标值，就算数据绑定正确，也只会在(0,0)、(1,1)等位置生成圆，大概率超出画布或看不到。

3. （可选）D3版本兼容问题
   如果使用D3 v5及以上版本，d3.json已改为基于Promise的API，旧版的回调写法可能无法正常执行，需要调整为Promise链式调用。

修复后的代码 #

适配旧版D3（v4及以下）

var svg = d3.select("#canvas");

d3.json(location_data, function(data){
  svg.selectAll("circle")
    // 绑定整个JSON数组，每个元素是带coord的对象
    .data(data)
    .enter()
    .append("circle")
    // 取每个对象coord数组的第一个值作为x坐标
    .attr("cx", function(d) {
      return d.coord[0];
    })
    // 取每个对象coord数组的第二个值作为y坐标
    .attr("cy", function(d) {
      return d.coord[1];
    })
    .attr("r", 30)
    .attr("fill", "lightgreen");
})

适配D3 v5及以上版本（推荐）

var svg = d3.select("#canvas");

d3.json(location_data)
  .then(function(data) {
    svg.selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr("cx", d => d.coord[0])
      .attr("cy", d => d.coord[1])
      .attr("r", 30)
      .attr("fill", "lightgreen");
  })
  .catch(function(error) {
    console.error("数据加载失败:", error);
  });

额外注意事项 #

• 确保页面中存在id="canvas"的SVG元素，并且设置了足够的宽高（例如<svg id="canvas" width="1000" height="1000"></svg>），避免坐标超出画布范围导致看不到圆形。
• 确认location_data是正确的JSON文件路径，本地调试时建议使用本地服务器（如http-server），避免跨域问题导致数据加载失败。

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