如何向使用 D3.js 创建的地图添加或创建地图比例尺

Question

我正在寻求有关创建用于 D3.js 可缩放地图的地图比例尺的帮助。 我经常使用 D3.js 为我的工作创建地图。 我从未在我过去构建的地图上放置比例尺，但我最近收到要求在地图上包含比例尺的请求。 我在网上搜索了某种类型的示例来构建，但我找不到任何东西。 我玩弄了 d3.scale.linear() 但我无法创建任何有用的东西。

我试图创建的是一个地图比例尺，当使用 d3.behavior.zoom() 放大和缩小时，它会相应地调整它的数字。 对此问题的任何帮助（工作模型或构建的东西）将不胜感激。 先感谢您。

Answer 1

您需要在 Web 比例尺中解决几个问题：

地图距离会因投影而异
D3 投影投影经纬度数据，不能直接用于测量物理距离
必须使用大圆距离测量物理距离

不久前，我为地图设计了一个比例尺，使用此处的公式计算地理坐标之间的物理距离。 但是你用哪两个点来测量距离呢？ 我使用了两个点，当它们连接形成一条穿过地图框中心的线时（水平方向，而不是横向地图的边缘），靠近地图中心的比例尺可能最能代表整个地图比例尺。 要使用 svg 坐标获取点的地理位置，请使用projection.invert([x,y])获取您的经度和纬度。

有了这两个点，您应该能够计算物理距离和 svg 坐标距离，为您提供比例所需的信息。 这可能看起来像：

var scaleWidth = width / 4;
var p1 = projection.invert([width/2 - scaleWidth/2, height / 2]);
var p2 = projection.invert([width/2 + scaleWidth/2, height / 2]);
var geoDistance = getDistance(p1,p2);

其中getDistance是一个返回两个地理点之间的大圆距离的函数，这个函数返回的地理距离在地图上用width/4像素表示。 现在，对于最简单的比例，您可以绘制一个width/4 pixels宽的矩形，并将其标记为getDistance long 返回的距离。

请注意，如果您每次都选择相同的两个 svg 点作为比例的参考点，比例尺可能会显示非圆形长度。 因此，您需要修改距离直到获得足够的整数，然后在角落中绘制比例尺（除非 1.954 公里宽的比例尺可以，否则这也会更快）。

要缩放，只需重新绘制（并重新计算两个中心点之间的距离，缩放因子对此无济于事）和/或转换比例以表示参考点之间的新物理距离（根据需要重新计算它们以形成整数）。

这是正在运行的秤块，以及下面的图像：