什么是 react-nyc-choropleth?
React-nyc-choropleth 是一个专门用于构建交互式区域地图的 React 组件库，它提供了各种丰富的可视化属性，帮助我们轻松创建漂亮的地图数据可视化图表。
react-nyc-choropleth 这个名字由来，“nyc” 是 New York City 的缩写，而“choropleth” 则是一种专门用于表示分类区间的地图，通常通过各个颜色来表示区间不同的值。
安装 react-nyc-choropleth
使用 npm 来安装 react-nyc-choropleth，只需要在控制台中输入以下命令
npm install --save react-nyc-choropleth
使用 react-nyc-choropleth
安装完成后，我们就可以使用 react-nyc-choropleth 了。现在来看一下如何使用。
引入 react-nyc-choropleth
首先，我们需要在项目中引入 react-nyc-choropleth。我们可以通过以下方式导入：
import { ChoroplethMap } from 'react-nyc-choropleth';渲染地图
react-nyc-choropleth 的核心是 ChoroplethMap 组件，我们需要将数据传递给该组件，以 render 一个地图。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- - ---- -----------------------
----- -------- - -
-
------ ----------
------ -----
--
-
------ ---------
------ -----
--
-
------ ----------
------ -----
--
-----
--
----- --- ------- --------------- -
-------- -
------ -
--------------
---------------
----------------
------------------
--------- ---------- ----
------------------------------
--
--
-
-组件属性
在 Example 中的 ChoroplethMap 组件中，属性有：
data: object，包含数据源，相应必有 key 和其值的组成的数组[{ state: 'Alabama', value: '23' }, ...]mapFileUrl: string，用于导入加载地图 JSON 数据URL。 在 CodeSandbox 和 Chrome 等站点部署项目时注意更改路径valueKey: string， 记录独立值的keyfeatureKey: string， 匹配 'data' 数中特征值的 key 值title: string， 地图标题projection: string， 投影的类型，默认：AlbersUsa，具体的例子可以参考 d3-geo 的其他投影选项padding: number， 地图上、下、左、右方向的留白度数，默认值为: 30……
安装 d3-geo
如果没有安装 d3-geo, 需要使用 npm 安装该模块。
npm install d3-geo
示例
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- - ---- -----------------------
------ ---- ---- -------------------
------ - ------------ - ---- ---------
----- ------------ - -
------ -------------------
------- ---------------------------------------------
--
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
---------- -------------------
------ ------ ----- -- -- -- -------
-----
--------- --------
----------- -------------
----------- ---------------
--
-
-------- -
------ -
---- ----------------
--------------
----------------------
------------------------------
----------------------------------
------------------------
---------------------------------
----------------------------------
------------
------------
--------- ---- --- ------ --- ------- --- ----- -- --
--
------
--
-
-
------ ------- ----总结
如果你正在寻找一个功能齐全的、可定制的地图可视化 React 组件库，那么 react-nyc-choropleth 可以是一个不错的选择。希望这篇文章对你使用 react-nyc-choropleth 有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005726d81e8991b448e8a35