地理图d3.js [英] geochart in d3.js

问题描述

我正在寻找一些指导或示例如何在d3.js中做地理图。
我需要在google图表中这一个，转向d3.js，因为我需要一些定制。到目前为止，我发现的最近的d3.js示例是这，但代码很长，我希望

I'm looking for some guidance or an example how to do a geochart in d3.js. I need something like this one in google charts, and turning to d3.js since I need some customization. So far the closest d3.js sample I found is this but the code is very long there and I am hoping to find something simpler.

推荐答案

您在寻找choropleth地图吗？这是一个最近的28行代码示例。

Are you looking for a choropleth map? Here's a recent example in 28 lines of code.

本示例使用默认投影， d3.geo.albersUsa ，这是包括阿拉斯加，夏威夷和波多黎各在内的美国的综合预测。如果要更改可见区域，您可能还需要更改投影; d3.geo.albers 适用于choropleth地图，因为它是等面积。 albers投影可让您设置原点，以便您可以进行聚焦在全局的特定部分，并且所有投影允许您指定 scale 和翻译以在屏幕上定位地图。

This example uses the default projection, d3.geo.albersUsa, which is a composite projection for the United States including Alaska, Hawaii and Puerto Rico. If you want to change the visible region, you probably also want to change the projection; d3.geo.albers is good for choropleth maps because it is equal-area. The albers projection lets you set the origin so that you can focus on a specific part of the global, and all projections allow you to specify scale and translate to position the map on-screen.

如果您想显示世界地图，我还要看看扩展投影插件。这增加了一些有用的地图投影，特别是对于世界地图，例如 Winkel Tripel 。下一个版本的D3还将包括一些令人振奋的新功能，例如任何投影的三维旋转（包括antemeridian切割;尝试拖动此示例），自适应重采样和改进的剪切。

If you want to display a world map, I'd also take a look at the ongoing development of the extended projections plugin. This adds a number of useful map projections, particularly for world maps, such as the Winkel Tripel. The next release of D3 will also include some exciting new features such as three-dimensional rotation for any projection (including antemeridian cutting; try dragging this example), adaptive resampling and improved clipping.

至于着色choropleth，你当然可以通过重新定义填充样式作为数据的函数来着色地理特征。

As for coloring the choropleth, you can of course color geographic features however you like by redefining the "fill" style as a function of data.

这篇关于地理图d3.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！