地图区域美国州/加拿大省缩写显示及边界点全圆展示问题（上）

当前使用.append("circle")添加的坐标点位于MapBBox边界时，仅显示半圆，需要调整投影或SVG尺寸来确保完整显示。

解决方案 #

问题根源是坐标点投影后刚好处于SVG可视区域的边缘，超出部分被浏览器自动裁剪。可以通过以下两种方式修复：

方式1：给投影添加内边距（推荐） #

修改投影配置，使用fitSize时预留出等于圆形半径的空间，确保边界上的圆形不会超出SVG范围：

// --- projection ------------------------------------
let circleRadius = 4; // 对应你的圆形半径
let projection = d3.geoMercator()
  .fitSize([width - 2 * circleRadius, height - 2 * circleRadius], geojsonTour)
  .translate([width / 2, height / 2]); // 保持地图居中

方式2：扩大SVG的外边距 #

调整margin，在原有基础上额外增加等于圆形半径的内边距，给边界圆形留出显示空间：

// --- margins, width, height --------------------------
let circleRadius = 4;
let margin = { 
  top: 20 + circleRadius, 
  right: 20 + circleRadius, 
  bottom: 20 + circleRadius, 
  left: 20 + circleRadius 
},
width = modalWidth - margin.left - margin.right,
height = tourHeightCalc - margin.top - margin.bottom;

// --- projection ------------------------------------
let projection = d3.geoMercator().fitSize([width, height], geojsonTour);

额外说明 #

如果你的圆形是被clipPath裁剪导致的半圆（当前代码中圆形未应用裁剪），可以将圆形元素添加到未被裁剪的SVG层级中，确保它不受clip-path属性影响：

// 确保圆形直接添加到svg根元素，而非被裁剪的g元素
svg.append("circle")
  .attr("cx", projection(destArray)[0])
  .attr("cy", projection(destArray)[1])
  .attr("r", 4)
  .attr("fill", "#338bff");

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