d3-geo 方位投影实战五种投影 API、参数配置与投影管理解析【免费下载链接】d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:项目地址: https://gitcode.com/GitHub_Trending/d3/d3本文基于 d3 官方文档 docs/d3-geo/azimuthal.md 展开完整覆盖d3.geoAzimuthalEqualArea()、d3.geoAzimuthalEquidistant()、d3.geoGnomonic()、d3.geoOrthographic()、d3.geoStereographic()五种方位Azimuthal投影的用法与官方示例中每一项配置rotate、fitExtent、clipAngle、clipExtent、precision的作用并结合 docs/d3-geo/projection.md、docs/components/WorldMap.vue 与包内测试帮助读者掌握方位投影的选型、配置与底层投影管线原理。什么是方位投影原文档的开篇给出了一句话定义Azimuthal projections project the sphere directly onto a plane. 方位投影将球面直接投影到一个平面上。与圆柱投影先投到圆柱再展开和圆锥投影先投到圆锥再展开不同方位投影没有中间曲面是把整个球面“压平”到一张平面上。这个特点决定了方位投影通常以某个中心点为锚围绕中心向外辐射非常适合表现“以某地为中心的世界/区域视角”也是 d3 官方示例中统一使用.rotate([110, -40])把视角旋转到亚太中心附近的原因。在 d3 的投影分类体系中docs/d3-geo/projection.md 将标准投影分为三大类方位投影、圆锥投影docs/d3-geo/conic.md、圆柱投影docs/d3-geo/cylindrical.md。d3 核心库实现了上述三类中最常用的若干种更多投影可通过d3-geo-projection扩展包获取该信息同样来自 docs/d3-geo/projection.md。方位投影还涉及球面离散几何的两大难点见 docs/d3-geo.md球面多边形的边是测地线大圆弧段而非直线除等距方位中的直线性特例外几乎所有投影都会把测地线弯曲因此准确投影必须沿弧线做插值d3 采用自适应采样adaptive sampling平衡精度与性能。球面与平面存在拓扑差异部分投影需要沿反子午线切割几何部分则需要按大圆裁剪如正射投影只能显示半个球面。这两点直接决定了下方五个投影各自需要的裁剪配置是理解示例代码的关键背景。五种方位投影 API 总览docs/api.md 中对这五个 API 的索引如下API说明d3.geoAzimuthalEqualArea()方位等积投影azimuthal equal-area projectiond3.geoAzimuthalEquidistant()方位等距投影azimuthal equidistant projectiond3.geoGnomonic()射影投影gnomonic projectiond3.geoOrthographic()正射投影azimuthal orthographic projectiond3.geoStereographic()球极投影azimuthal stereographic projection每个 API 的完整签名含*Raw原始投影函数定义在上表文档的对应锚点中每个 API 还配套导出了一个 raw 投影如geoAzimuthalEqualAreaRaw这是传入 geoProjection 或geoProjectionMutator构造自定义投影的底层构件。逐个解析官方示例中的完整配置以下代码全部来自 docs/d3-geo/azimuthal.md 中各投影章节内嵌的WorldMap组件表达式画布尺寸均为width 688、height 400。geoAzimuthalEqualArea()方位等积投影d3.geoAzimuthalEqualArea() .rotate([110, -40]) .fitExtent([[1, 1], [width - 1, height - 1]], {type: Sphere}) .precision(0.2)等积投影保证球面上任何区域投影到平面后面积不变是做面积对比的统计地图的常见选择。示例要点rotate([110, -40])设置三轴球面旋转yaw110°pitch-40°把球面“调转”到想要的视角中心。rotate的完整语义两元素或三元素角度数组第三角缺省为 0见 docs/d3-geo/projection.md。fitExtent([[1, 1], [687, 399]], {type: Sphere})以整个球体{type: Sphere}即地球轮廓 GeoJSON 对象为参照物自动计算scale与translate使球面恰好适配 1 像素内边距的取景框。fitExtent会忽略当前的clipExtent并以内效 scale 150 下的精度计算外接矩形见 docs/d3-geo/projection.md。precision(0.2)将自适应重采样阈值Douglas–Peucker 距离单位像素从默认的 √0.5 ≈ 0.7071 收紧到 0.2使弧线更平滑代价是生成更多顶点见 docs/d3-geo/projection.md。geoAzimuthalEquidistant()方位等距投影d3.geoAzimuthalEquidistant() .rotate([110, -40]) .fitExtent([[1, 1], [width - 1, height - 1]], {type: Sphere}) .precision(0.2)配置方式与等积版本完全一致只是投影函数不同方位等距投影保证从投影中心出发的距离与方位角保真是“以某点为中心的雷达式世界地图”的常用选法。等距与等积不可兼得选型取决于你的地图是强调“离中心多远”还是强调“面积多大”。geoGnomonic()射影投影d3.geoGnomonic() .scale(width / 6) .translate([width / 2, height / 2]) .clipAngle(74 - 1e-4) .clipExtent([[-1, -1], [width 1, height 1]]) .precision(0.2)注意示例在这里没有使用fitExtent而是手工给出scale(width / 6)和translate([width / 2, height / 2])——因为射影投影的可视域是一个小于半球的小圆直接对整球fitExtent会得到过大的画幅手工控制比例更紧凑。其余两项裁剪是本投影的关键clipAngle(74 - 1e-4)设置球面小圆裁剪半径度。投影中心周围 74° 半径内的球面才被投影1e-4是一个数值上的微调减去极小量这是文档示例给出的实用取值。若将clipAngle设为null则切换为沿反子午线切割模式见 docs/d3-geo/projection.md。clipExtent([[-1, -1], [width 1, height 1]])设置平面视口裁剪矩形向外各扩 1 像素以消除边缘毛刺。小圆裁剪clipAngle作用于球面与视口裁剪clipExtent作用于平面相互独立可组合使用。geoOrthographic()正射投影d3.geoOrthographic() .rotate([110, -40]) .fitExtent([[1, 1], [width - 1, height - 1]], {type: Sphere}) .precision(0.2)正射投影等价于从无穷远处望向球体只能看到半个球面效果类似卫星照片。因为可视域就是完整半球大圆边界fitExtent对{type: Sphere}即可得到刚好贴合圆形轮廓的取景无需显式clipAngle——但内部仍依赖大圆裁剪来丢弃背面半球docs/d3-geo.md 提到“clipping geometry to a great circle”正是此类投影的需求。geoStereographic()球极投影d3.geoStereographic() .scale(width / 4) .translate([width / 2, height / 2]) .rotate([-27, 0]) .clipAngle(135 - 1e-4) .clipExtent([[-1, -1], [width 1, height 1]]) .precision(0.2)球极投影把球面从对面极点“推”向平面同样只展示中心点周围的小圆区域因此与射影投影一样采用手工scale/translateclipAngleclipExtent的组合。clipAngle(135 - 1e-4)给出了一个比射影投影大得多的可视域135°画面呈现典型的“鱼眼”效果rotate([-27, 0])则把中心转到西经 27° 附近北大西洋视角。scale(width / 4)与射影的width / 6不同可视域越大所需比例系数越大。五个示例的配置差异小结投影尺寸策略球面裁剪视口裁剪视角等积 / 等距fitExtent整球无无rotate([110, -40])正射fitExtent整球 半球大圆裁剪内置无rotate([110, -40])射影手工scale/translateclipAngle(74 - 1e-4)clipExtent(±1px)默认中心球极手工scale/translateclipAngle(135 - 1e-4)clipExtent(±1px)rotate([-27, 0])规律很清晰可视域为完整半球的投影等积、等距、正射用fitExtent一步到位可视域是小圆的投影射影、球极则需要手工控制比例并用clipAngle/clipExtent双重裁剪。投影管线的底层机制docs/d3-geo/projection.md 对projection.stream的描述给出了一个投影的完整处理链输入几何先被转换为弧度radians沿三轴旋转rotate裁剪到小圆或沿反子午线切割preclip最后以自适应重采样投影到平面并施加 scale 与 translation。对照上文示例可以把每个 API 调用映射到管线中的一个环节rotate—— 三轴球面旋转对应 yaw/pitch/roll。因为 d3 使用球面 GeoJSON 表示数据所以“任意视角套在任意投影上”都可以靠旋转几何实现docs/d3-geo.md。clipAngle—— 球面预裁剪preclip。geoClipCircle(angle)生成裁剪函数把几何限制在以投影中心为圆心、angle为半径的小圆内docs/d3-geo/projection.md。设为null时改用geoClipAntimeridian沿反子午线切割docs/d3-geo/projection.md。raw 投影函数—— 真正的球面→平面数学变换接收弧度(lambda, phi)返回平面点。precision控制该阶段的自适应重采样阈值。scale/translate/center—— 平面仿射变换。默认translate为[480, 250]960×500 画布中心scale默认值因投影而异docs/d3-geo/projection.md。clipExtent—— 平面后裁剪postclip。geoClipRectangle把几何限制在像素矩形内docs/d3-geo/projection.md。关于自适应重采样docs/d3-geo.md 说明其灵感来自 Visvalingam 线简化方法用来在“曲线画得多精确”和“生成多少顶点”之间取得平衡。precision的取值就是 Douglas–Peucker 距离阈值默认 √0.5 ≈ 0.7071示例统一收紧到0.2说明官方文档渲染时更看重弧线的光滑度。如果上述标准投影不满足需求还可以基于 raw 投影自行构造d3.geoProjection(project)接收一个接收弧度、返回平面点的函数即可生成投影scale/translate/rotate 由框架自动处理若投影带有可调参数如圆锥投影的双标准纬线则用d3.geoProjectionMutator(factory)生成 mutatordocs/d3-geo/projection.md。上文五个 API 注释中隐藏的geoAzimuthalEqualAreaRaw等函数正是这类派生投影的基础构件。文档示例的渲染实现WorldMap 组件azimuthal.md 中五个地图均由 docs/components/WorldMap.vue 组件渲染其实现本身就是一份方位投影的实用范例值得拆解const outline {type: Sphere}; // 地球轮廓GeoJSON Sphere const graticule d3.geoGraticule10(); // 10° 经纬网格 const path d3.geoPath(projection); // 用投影生成 SVG path关键实现细节数据源从world-atlas2.0.2的 CDN 拉取 TopoJSON如land-110m.json再用topojson.feature(world, world.objects.land)转成 GeoJSON Feature最后交给path(feature)生成d属性。110m是低分辨率渲染快组件的resolution属性可切换为50m等更精细的数据。SVG 结构四个path依次为底层的 Sphere 填充、经纬网格10% 透明度、陆地填充、顶层 Sphere 描边保证轮廓线始终压在陆地之上。拖拽旋转交互组件在rotate属性为真时azimuthal.md中五个示例都传了rotate监听pointermove用requestAnimationFrame节流后调用projection.rotate([rotate[0] (x1 - x0) / width * 20, rotate[1], rotate[2]])并重新生成三条 path——水平拖动鼠标即带动整个球面旋转。注意只有分辨率恰为110m时才启用该交互rotate rotate resolution 110m projection.rotate()这是文档站的性能取舍。把这段组件逻辑抽出来就是一个可复用的“方位投影地球仪”交互模板geoPathSphere轮廓 rotate状态 requestAnimationFrame重绘。包集成、导出与测试验证在当前仓库d3 7.9.0中方位投影来自d3-geo依赖package.json 声明d3-geo: ^3.1.1文档构建工具为 VitePressdocs:dev/docs:build脚本docs/api.md 汇总了全部 API 索引。src/index.js 以export * from d3-geo一行将 d3-geo 的全部导出并入d3命名空间因此d3.geoAzimuthalEqualArea等五个 API 开箱即用。test/d3-test.js 遍历package.json的每个依赖动态import后断言其所有导出除version都存在于聚合后的d3对象上——这就是“d3包不遗漏任何子模块导出”的自动化保证。运行验证方式在本仓库执行yarn yarn test对应mocha test/**/*-test.js eslint src test可运行测试套件执行yarn docs:dev可本地预览文档站在 d3-geo 一节的 Azimuthal projections 页面直接看到本文解析的五个交互式投影。小结方位投影选型与配置要点视角控制统一走rotate方位投影以中心点辐射旋转球面即可把任意地点放到中心与clipAngle配合决定可视域。裁剪分两层球面clipAngle小圆null时切为反子午线切割 平面clipExtent视口矩形二者独立、可叠加小圆可视域投影射影、球极通常需要两者同时设置示例中clipExtent向外扩 1 像素是消除边缘瑕疵的实用技巧。取景二选一整球/半球可视域用fitExtent(extent, {type: Sphere})自动适配小圆可视域用手工scaletranslate获得更紧凑构图。precision(0.2)是文档渲染的平滑度取值生产环境可按性能预算放宽回默认 √0.5。需要更深定制时从各 API 对应的*Raw函数出发经geoProjection/geoProjectionMutator派生自定义投影。【免费下载链接】d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:项目地址: https://gitcode.com/GitHub_Trending/d3/d3创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 d3-geo 方位投影实战：五种投影 API、参数配置与投影管理解析
d3-geo 方位投影实战五种投影 API、参数配置与投影管理解析【免费下载链接】d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:项目地址: https://gitcode.com/GitHub_Trending/d3/d3本文基于 d3 官方文档 docs/d3-geo/azimuthal.md 展开完整覆盖d3.geoAzimuthalEqualArea()、d3.geoAzimuthalEquidistant()、d3.geoGnomonic()、d3.geoOrthographic()、d3.geoStereographic()五种方位Azimuthal投影的用法与官方示例中每一项配置rotate、fitExtent、clipAngle、clipExtent、precision的作用并结合 docs/d3-geo/projection.md、docs/components/WorldMap.vue 与包内测试帮助读者掌握方位投影的选型、配置与底层投影管线原理。什么是方位投影原文档的开篇给出了一句话定义Azimuthal projections project the sphere directly onto a plane. 方位投影将球面直接投影到一个平面上。与圆柱投影先投到圆柱再展开和圆锥投影先投到圆锥再展开不同方位投影没有中间曲面是把整个球面“压平”到一张平面上。这个特点决定了方位投影通常以某个中心点为锚围绕中心向外辐射非常适合表现“以某地为中心的世界/区域视角”也是 d3 官方示例中统一使用.rotate([110, -40])把视角旋转到亚太中心附近的原因。在 d3 的投影分类体系中docs/d3-geo/projection.md 将标准投影分为三大类方位投影、圆锥投影docs/d3-geo/conic.md、圆柱投影docs/d3-geo/cylindrical.md。d3 核心库实现了上述三类中最常用的若干种更多投影可通过d3-geo-projection扩展包获取该信息同样来自 docs/d3-geo/projection.md。方位投影还涉及球面离散几何的两大难点见 docs/d3-geo.md球面多边形的边是测地线大圆弧段而非直线除等距方位中的直线性特例外几乎所有投影都会把测地线弯曲因此准确投影必须沿弧线做插值d3 采用自适应采样adaptive sampling平衡精度与性能。球面与平面存在拓扑差异部分投影需要沿反子午线切割几何部分则需要按大圆裁剪如正射投影只能显示半个球面。这两点直接决定了下方五个投影各自需要的裁剪配置是理解示例代码的关键背景。五种方位投影 API 总览docs/api.md 中对这五个 API 的索引如下API说明d3.geoAzimuthalEqualArea()方位等积投影azimuthal equal-area projectiond3.geoAzimuthalEquidistant()方位等距投影azimuthal equidistant projectiond3.geoGnomonic()射影投影gnomonic projectiond3.geoOrthographic()正射投影azimuthal orthographic projectiond3.geoStereographic()球极投影azimuthal stereographic projection每个 API 的完整签名含*Raw原始投影函数定义在上表文档的对应锚点中每个 API 还配套导出了一个 raw 投影如geoAzimuthalEqualAreaRaw这是传入 geoProjection 或geoProjectionMutator构造自定义投影的底层构件。逐个解析官方示例中的完整配置以下代码全部来自 docs/d3-geo/azimuthal.md 中各投影章节内嵌的WorldMap组件表达式画布尺寸均为width 688、height 400。geoAzimuthalEqualArea()方位等积投影d3.geoAzimuthalEqualArea() .rotate([110, -40]) .fitExtent([[1, 1], [width - 1, height - 1]], {type: Sphere}) .precision(0.2)等积投影保证球面上任何区域投影到平面后面积不变是做面积对比的统计地图的常见选择。示例要点rotate([110, -40])设置三轴球面旋转yaw110°pitch-40°把球面“调转”到想要的视角中心。rotate的完整语义两元素或三元素角度数组第三角缺省为 0见 docs/d3-geo/projection.md。fitExtent([[1, 1], [687, 399]], {type: Sphere})以整个球体{type: Sphere}即地球轮廓 GeoJSON 对象为参照物自动计算scale与translate使球面恰好适配 1 像素内边距的取景框。fitExtent会忽略当前的clipExtent并以内效 scale 150 下的精度计算外接矩形见 docs/d3-geo/projection.md。precision(0.2)将自适应重采样阈值Douglas–Peucker 距离单位像素从默认的 √0.5 ≈ 0.7071 收紧到 0.2使弧线更平滑代价是生成更多顶点见 docs/d3-geo/projection.md。geoAzimuthalEquidistant()方位等距投影d3.geoAzimuthalEquidistant() .rotate([110, -40]) .fitExtent([[1, 1], [width - 1, height - 1]], {type: Sphere}) .precision(0.2)配置方式与等积版本完全一致只是投影函数不同方位等距投影保证从投影中心出发的距离与方位角保真是“以某点为中心的雷达式世界地图”的常用选法。等距与等积不可兼得选型取决于你的地图是强调“离中心多远”还是强调“面积多大”。geoGnomonic()射影投影d3.geoGnomonic() .scale(width / 6) .translate([width / 2, height / 2]) .clipAngle(74 - 1e-4) .clipExtent([[-1, -1], [width 1, height 1]]) .precision(0.2)注意示例在这里没有使用fitExtent而是手工给出scale(width / 6)和translate([width / 2, height / 2])——因为射影投影的可视域是一个小于半球的小圆直接对整球fitExtent会得到过大的画幅手工控制比例更紧凑。其余两项裁剪是本投影的关键clipAngle(74 - 1e-4)设置球面小圆裁剪半径度。投影中心周围 74° 半径内的球面才被投影1e-4是一个数值上的微调减去极小量这是文档示例给出的实用取值。若将clipAngle设为null则切换为沿反子午线切割模式见 docs/d3-geo/projection.md。clipExtent([[-1, -1], [width 1, height 1]])设置平面视口裁剪矩形向外各扩 1 像素以消除边缘毛刺。小圆裁剪clipAngle作用于球面与视口裁剪clipExtent作用于平面相互独立可组合使用。geoOrthographic()正射投影d3.geoOrthographic() .rotate([110, -40]) .fitExtent([[1, 1], [width - 1, height - 1]], {type: Sphere}) .precision(0.2)正射投影等价于从无穷远处望向球体只能看到半个球面效果类似卫星照片。因为可视域就是完整半球大圆边界fitExtent对{type: Sphere}即可得到刚好贴合圆形轮廓的取景无需显式clipAngle——但内部仍依赖大圆裁剪来丢弃背面半球docs/d3-geo.md 提到“clipping geometry to a great circle”正是此类投影的需求。geoStereographic()球极投影d3.geoStereographic() .scale(width / 4) .translate([width / 2, height / 2]) .rotate([-27, 0]) .clipAngle(135 - 1e-4) .clipExtent([[-1, -1], [width 1, height 1]]) .precision(0.2)球极投影把球面从对面极点“推”向平面同样只展示中心点周围的小圆区域因此与射影投影一样采用手工scale/translateclipAngleclipExtent的组合。clipAngle(135 - 1e-4)给出了一个比射影投影大得多的可视域135°画面呈现典型的“鱼眼”效果rotate([-27, 0])则把中心转到西经 27° 附近北大西洋视角。scale(width / 4)与射影的width / 6不同可视域越大所需比例系数越大。五个示例的配置差异小结投影尺寸策略球面裁剪视口裁剪视角等积 / 等距fitExtent整球无无rotate([110, -40])正射fitExtent整球 半球大圆裁剪内置无rotate([110, -40])射影手工scale/translateclipAngle(74 - 1e-4)clipExtent(±1px)默认中心球极手工scale/translateclipAngle(135 - 1e-4)clipExtent(±1px)rotate([-27, 0])规律很清晰可视域为完整半球的投影等积、等距、正射用fitExtent一步到位可视域是小圆的投影射影、球极则需要手工控制比例并用clipAngle/clipExtent双重裁剪。投影管线的底层机制docs/d3-geo/projection.md 对projection.stream的描述给出了一个投影的完整处理链输入几何先被转换为弧度radians沿三轴旋转rotate裁剪到小圆或沿反子午线切割preclip最后以自适应重采样投影到平面并施加 scale 与 translation。对照上文示例可以把每个 API 调用映射到管线中的一个环节rotate—— 三轴球面旋转对应 yaw/pitch/roll。因为 d3 使用球面 GeoJSON 表示数据所以“任意视角套在任意投影上”都可以靠旋转几何实现docs/d3-geo.md。clipAngle—— 球面预裁剪preclip。geoClipCircle(angle)生成裁剪函数把几何限制在以投影中心为圆心、angle为半径的小圆内docs/d3-geo/projection.md。设为null时改用geoClipAntimeridian沿反子午线切割docs/d3-geo/projection.md。raw 投影函数—— 真正的球面→平面数学变换接收弧度(lambda, phi)返回平面点。precision控制该阶段的自适应重采样阈值。scale/translate/center—— 平面仿射变换。默认translate为[480, 250]960×500 画布中心scale默认值因投影而异docs/d3-geo/projection.md。clipExtent—— 平面后裁剪postclip。geoClipRectangle把几何限制在像素矩形内docs/d3-geo/projection.md。关于自适应重采样docs/d3-geo.md 说明其灵感来自 Visvalingam 线简化方法用来在“曲线画得多精确”和“生成多少顶点”之间取得平衡。precision的取值就是 Douglas–Peucker 距离阈值默认 √0.5 ≈ 0.7071示例统一收紧到0.2说明官方文档渲染时更看重弧线的光滑度。如果上述标准投影不满足需求还可以基于 raw 投影自行构造d3.geoProjection(project)接收一个接收弧度、返回平面点的函数即可生成投影scale/translate/rotate 由框架自动处理若投影带有可调参数如圆锥投影的双标准纬线则用d3.geoProjectionMutator(factory)生成 mutatordocs/d3-geo/projection.md。上文五个 API 注释中隐藏的geoAzimuthalEqualAreaRaw等函数正是这类派生投影的基础构件。文档示例的渲染实现WorldMap 组件azimuthal.md 中五个地图均由 docs/components/WorldMap.vue 组件渲染其实现本身就是一份方位投影的实用范例值得拆解const outline {type: Sphere}; // 地球轮廓GeoJSON Sphere const graticule d3.geoGraticule10(); // 10° 经纬网格 const path d3.geoPath(projection); // 用投影生成 SVG path关键实现细节数据源从world-atlas2.0.2的 CDN 拉取 TopoJSON如land-110m.json再用topojson.feature(world, world.objects.land)转成 GeoJSON Feature最后交给path(feature)生成d属性。110m是低分辨率渲染快组件的resolution属性可切换为50m等更精细的数据。SVG 结构四个path依次为底层的 Sphere 填充、经纬网格10% 透明度、陆地填充、顶层 Sphere 描边保证轮廓线始终压在陆地之上。拖拽旋转交互组件在rotate属性为真时azimuthal.md中五个示例都传了rotate监听pointermove用requestAnimationFrame节流后调用projection.rotate([rotate[0] (x1 - x0) / width * 20, rotate[1], rotate[2]])并重新生成三条 path——水平拖动鼠标即带动整个球面旋转。注意只有分辨率恰为110m时才启用该交互rotate rotate resolution 110m projection.rotate()这是文档站的性能取舍。把这段组件逻辑抽出来就是一个可复用的“方位投影地球仪”交互模板geoPathSphere轮廓 rotate状态 requestAnimationFrame重绘。包集成、导出与测试验证在当前仓库d3 7.9.0中方位投影来自d3-geo依赖package.json 声明d3-geo: ^3.1.1文档构建工具为 VitePressdocs:dev/docs:build脚本docs/api.md 汇总了全部 API 索引。src/index.js 以export * from d3-geo一行将 d3-geo 的全部导出并入d3命名空间因此d3.geoAzimuthalEqualArea等五个 API 开箱即用。test/d3-test.js 遍历package.json的每个依赖动态import后断言其所有导出除version都存在于聚合后的d3对象上——这就是“d3包不遗漏任何子模块导出”的自动化保证。运行验证方式在本仓库执行yarn yarn test对应mocha test/**/*-test.js eslint src test可运行测试套件执行yarn docs:dev可本地预览文档站在 d3-geo 一节的 Azimuthal projections 页面直接看到本文解析的五个交互式投影。小结方位投影选型与配置要点视角控制统一走rotate方位投影以中心点辐射旋转球面即可把任意地点放到中心与clipAngle配合决定可视域。裁剪分两层球面clipAngle小圆null时切为反子午线切割 平面clipExtent视口矩形二者独立、可叠加小圆可视域投影射影、球极通常需要两者同时设置示例中clipExtent向外扩 1 像素是消除边缘瑕疵的实用技巧。取景二选一整球/半球可视域用fitExtent(extent, {type: Sphere})自动适配小圆可视域用手工scaletranslate获得更紧凑构图。precision(0.2)是文档渲染的平滑度取值生产环境可按性能预算放宽回默认 √0.5。需要更深定制时从各 API 对应的*Raw函数出发经geoProjection/geoProjectionMutator派生自定义投影。【免费下载链接】d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:项目地址: https://gitcode.com/GitHub_Trending/d3/d3创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考