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

Question

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

我尝试创建的是一个地图比例尺，可以在使用d3.behavior.zoom（）进行放大和缩小时相应地调整它的数字。任何有关这个问题的帮助（一个工作模型或建立的东西）将非常感激。先感谢您。

Answer 1

您需要在网络比例栏中解决几个问题：

• 地图距离会因投影而异。
• D3投影项目lat长数据，不能直接用于测量物理距离
• 必须使用大圆距离测量物理距离

我为地图设计了一个缩放，使用公式here来表示地理坐标之间的物理距离。但是你用两点来衡量距离？我使用了两个点，当连接形成一条穿过地图框架中心的线条（水平而不是边缘以用于横向地图）时，靠近地图中心的比例可能最能代表整个地图比例。要使用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长返回的距离。

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

要进行缩放，只需重绘（并重新计算两个中心点之间的距离，缩放系数对此无效）和/或转换比例以表示参考点之间的新物理距离（根据需要重新计算它们）一个圆数）。

实施规模的

Here's a bl.ock及其下图：

Answer 2

我制作了一个名为d3-geo-scale-bar的D3.js插件，该插件可以完成您要寻找的内容。

这是GitHub仓库：https://github.com/HarryStevens/d3-geo-scale-bar

这是一个基本的演示：https://bl.ocks.org/HarryStevens/8c8d3a489aa1372e14b8084f94b32464

这是一个带有平移和缩放的演示：https://bl.ocks.org/HarryStevens/64fc5f1a4489abe78433b7d19510f864

这是一个可观察的笔记本演示：https://observablehq.com/d/75249011244aafd6