如何在 D3 + Leaflet 地图中根据经纬度出现频次动态缩放圆圈大小

本文详解如何将原始 csv 中重复出现的经纬度坐标聚合成频次统计，并基于该频次动态设置 svg 圆圈半径，实现地理热点可视化。核心步骤包括：数据分组聚合、频次映射到半径、适配地图投影更新逻辑。

在 D3 与 Leaflet 协同绘图场景中，若原始数据包含大量重复的经纬度（如用户签到、事件上报点），直接为每条记录绘制独立圆圈会导致视觉重叠、难以识别热点区域。理想方案是先聚合相同坐标出现次数，再按频次缩放圆圈半径——这既提升可读性，又准确反映空间密度。

✅ 正确做法：使用 d3.group() 聚合频次（推荐 D3 v7+）

D3 v7 引入了简洁高效的 d3.group() 工具，可按自定义键对数据分组。关键在于将经纬度组合转为唯一字符串键（如 "52.5200,13.4050"），再统计每组长度：

// 假设 d3.csv() 加载后的原始数据为 `rawData`
const grouped = d3.group(rawData, d => 
  `${+d.sub_district_lat.toFixed(6)},${+d.sub_district_long.toFixed(6)}`
);

// 转换为 [{cnt: N, sub_district_lat: ..., sub_district_long: ...}] 格式
const data = Array.from(grouped).map(([key, records]) => ({
  cnt: records.length,
  sub_district_lat: +records[0].sub_district_lat,
  sub_district_long: +records[0].sub_district_long
}));

⚠️ 注意：对经纬度做 toFixed(6) 可避免浮点精度差异导致的分组失败（如 52.52000000000001 与 52.52 被视为不同键）。

? 将频次映射为圆圈半径

直接使用 r = 12 * d.cnt 简单但存在风险：当某点频次极高（如 100+）时，圆圈会过度遮盖地图。更稳健的做法是使用比例尺（scale）进行非线性缩放：

// 创建线性比例尺：频次范围 → 半径范围（例如 1~50）
const radiusScale = d3.scaleLinear()
  .domain(d3.extent(data, d => d.cnt)) // 自动取最小/最大频次
  .range([4, 30]); // 最小半径4px，最大30px

// 绘制时应用比例尺
.attr("r", d => radiusScale(d.cnt))

若需强调差异（如频次 1 和 10 应有显著大小区别），可改用 d3.scaleSqrt() 或 d3.scalePow().exponent(0.5) 实现平方根缩放，使视觉尺寸增长更符合人眼感知。

? 完整集成代码（关键片段）

d3.csv("longAndLat.csv").then(function(rawData) {
  // 步骤1：聚合频次
  const grouped = d3.group(rawData, d => 
    `${+d.sub_district_lat.toFixed(6)},${+d.sub_district_long.toFixed(6)}`
  );
  const data = Array.from(grouped).map(([_, records]) => ({
    cnt: records.length,
    sub_district_lat: +records[0].sub_district_lat,
    sub_district_long: +records[0].sub_district_long
  }));

  // 步骤2：创建半径比例尺
  const radiusScale = d3.scaleSqrt()
    .domain(d3.extent(data, d => d.cnt))
    .range([5, 25]);

  // 步骤3：绑定数据并绘制
  const svg = d3.select("#mapid").select("svg");
  const circles = svg.selectAll("circle")
    .data(data)
    .enter().append("circle")
      .attr("cx", d => map.latLngToLayerPoint([d.sub_district_lat, d.sub_district_long]).x)
      .attr("cy", d => map.latLngToLayerPoint([d.sub_district_lat, d.sub_district_long]).y)
      .attr("r", d => radiusScale(d.cnt))
      .style("fill", "#e34a33")
      .attr("fill-opacity", 0.7)
      .attr("stroke", "#b30000")
      .attr("stroke-width", 1);

  // 步骤4：响应地图移动/缩放（注意：仅更新位置，不重新绑定数据）
  function updateCircles() {
    circles
      .attr("cx", d => map.latLngToLayerPoint([d.sub_district_lat, d.sub_district_long]).x)
      .attr("cy", d => map.latLngToLayerPoint([d.sub_district_lat, d.sub_district_long]).y);
  }
  map.on("moveend", updateCircles);
});

? 注意事项与最佳实践

• 性能优化：若数据量极大（>10万点），建议在服务端预聚合，或前端使用 d3.rollup() 替代 d3.group()（v7 中二者功能一致，但 rollup 更语义化）。
• 防重叠增强：高频点可能仍存在视觉重叠。可叠加 d3.forceSimulation() 进行轻微斥力位移，或改用 d3.geoCircle() 绘制带缓冲区的 GeoJSON 圈层。
• 交互提示：为圆圈添加 title 属性或 tooltip，悬停显示具体频次与坐标：

  .append("title")
    .text(d => `频次: ${d.cnt}\n坐标: [${d.sub_district_lat}, ${d.sub_district_long}]`)

• D3 版本兼容性：若必须使用 D3 v4/v5，可用 d3.nest() 替代 d3.group()，但语法更冗长；强烈建议升级至 v7+。

通过以上方法，你不仅能精准表达地理数据的密度分布，还能让可视化结果兼具专业性与表现力——每一个圆圈的大小，都是真实世界热度的直观映射。