本文详解如何将原始 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）进行非线性缩放：
HISUI 前端框架开发指南（IRIS版）
下载
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
// 创建线性比例尺：频次范围 → 半径范围（例如 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+。
通过以上方法，你不仅能精准表达地理数据的密度分布，还能让可视化结果兼具专业性与表现力——每一个圆圈的大小，都是真实世界热度的直观映射。
