如何向使用D3.js创建的地图添加或创建地图比例尺 [英] How to Add or Create a Map Scale Bar to a Map created with D3.js

问题描述

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

我要创建的是一个地图比例尺，当使用d3.behavior.zoom()放大和缩小时，可以相应地调整其数字.对此问题的任何帮助(工作模型或需要建立的模型)将不胜感激.先感谢您.

解决方案

我制作了一个名为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

I am seeking help with creating a map scale bar for use with a D3.js zoomable map. I often create maps for my job using D3.js. I never placed a scale bar on the maps I built in the past but I recently gotten requests to include a scale bar on the maps. I searched the web for some type of example to build off of, but I couldn't find anything. I toyed around with d3.scale.linear() but I'm unable to create anything useful.

What I'm trying to create is a map scale bar that adjust it's numbers accordingly when zooming in and out with d3.behavior.zoom(). Any help with this issue (a working model or something to build off of) will greatly be appreciated. Thank you in advance.

解决方案

I made a D3.js plugin called d3-geo-scale-bar that should accomplish what you're looking for.

Here's the GitHub repo: https://github.com/HarryStevens/d3-geo-scale-bar

Here's a basic demo: https://bl.ocks.org/HarryStevens/8c8d3a489aa1372e14b8084f94b32464

And here's a demo with pan and zoom: https://bl.ocks.org/HarryStevens/64fc5f1a4489abe78433b7d19510f864

Here's an Observable notebook demo: https://observablehq.com/d/75249011244aafd6

这篇关于如何向使用D3.js创建的地图添加或创建地图比例尺的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！