如何拆分经纬度字符串以在D3.js中实现圆形地理定位？

针对你的需求，有两种简单的修改方式，适配CSV中单列合并的经纬度字符串：

方案1：预处理CSV数据（推荐） #

在加载CSV时提前拆分经纬度字符串，将数据转换成和分列时一致的结构，后续绘制代码无需大幅改动。

修改d3.csv的调用逻辑，添加行处理函数：

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

d3.queue()
  .defer(d3.json, "map.geojson")     
  // 新增行处理函数，拆分经纬度
  .defer(d3.csv, "circles.csv", function(d) {
    // 替换`d.latlon`为你CSV中实际的合并列名
    const [lat, lon] = d.latlon.split(",").map(str => parseFloat(str.trim()));
    return {
      ...d, // 保留原数据的其他字段（比如n）
      lat: lat,
      lon: lon
    };
  })   
  .await(ready);

// 原绘制代码完全不变
svg
  .selectAll("myCircles")
  .data(data.sort(function(a,b) { return +b.n - +a.n }).filter(function(d,i){ return i<10 }))
  .enter()
  .append("circle")
    .attr("cx", function(d){ return projection([+d.lon, +d.lat])[0] })
    .attr("cy", function(d){ return projection([+d.lon, +d.lat])[1] })
    .attr("r", 5)
    .style("fill", function(d){ return color(d.n) })
    .attr("stroke", "black")
    .attr("stroke-width", 0)
    .attr("fill-opacity", .6);

方案2：直接在绘制时拆分字符串 #

如果不想预处理数据，可在计算圆形坐标时直接拆分经纬度字符串：

修改圆形的cx和cy属性部分：

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

d3.queue()
  .defer(d3.json, "map.geojson")     
  .defer(d3.csv, "circles.csv")   
  .await(ready);

svg
  .selectAll("myCircles")
  .data(data.sort(function(a,b) { return +b.n - +a.n }).filter(function(d,i){ return i<10 }))
  .enter()
  .append("circle")
    // 直接在回调中拆分经纬度
    .attr("cx", function(d){
      // 替换`d.latlon`为你CSV中实际的合并列名
      const [lat, lon] = d.latlon.split(",").map(str => parseFloat(str.trim()));
      return projection([lon, lat])[0]; // 投影函数需要[经度, 纬度]的顺序
    })
    .attr("cy", function(d){
      const [lat, lon] = d.latlon.split(",").map(str => parseFloat(str.trim()));
      return projection([lon, lat])[1];
    })
    .attr("r", 5)
    .style("fill", function(d){ return color(d.n) })
    .attr("stroke", "black")
    .attr("stroke-width", 0)
    .attr("fill-opacity", .6);

关键细节说明 #

• split(",")：将合并字符串按逗号分割成数组（例："44.999572, -93.351774" → ["44.999572", " -93.351774"]）
• trim()：去除字符串前后的空格，避免转换数值时出错
• parseFloat()：将字符串类型的坐标转换为数值类型
• D3投影函数projection()要求坐标顺序为**[经度, 纬度]**，注意不要搞反

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