前言
在前端开发中，数据可视化是一个不可或缺的环节。而数据可视化库 d3.js 的知名度和应用广泛度是无法忽略的。而在 Angular2 开发中使用 d3.js 结合起来开发一个网站或者应用是一项相对繁琐和技术要求较高的任务。因此， npm 包 angular2-d3plus 提供了一种基于 Angular2 的 d3.js 数据可视化开发解决方案，非常适合快速构建数据可视化页面。
快速上手
安装
在使用本包之前，请确保已经正确安装过 Angular 及 npm，不在本文档的讲解范围内。若需要这方面的帮助可以参考 Angular 官方文档。
在项目中运行下列命令进行安装：
npm install angular2-d3plus --save
引入模块
在 Angular2 中，组件和服务都是模块的一种，所有组件和服务都必须被引入模块中才能被使用。
在使用之前，需要在 AppModule 中引入 D3PlusModule 与 HttpModule。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ---------- - ---- ---------------- ------ - ------------ - ---- ------------------ ------ - ------------ - ---- ------------------ ----------- -------- - -------------- ----------- ------------ -- ------------- - ------------ -- ---------- - ------------ - -- ------ ----- --------- - -
D3plus 组件
本包的最大特点之一是其提供了大量可用的 D3plus 组件，下面是一个简单的例子：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- ------------------
------------
--------- ---------
------------ ----------------------
--
------ ----- ------------ -
----- - --- --
------ ----
------------------- ------- -------------- -
--------- - -
- ------- ------- ------ --- --------- --- --
- ------- ------ ------ --- --------- --- --
- ------- -------- ------ --- --------- --- -
--
---------- - -------------------------------- -
------- ---------
-------- -------
----- -------
-------- -----
------------
-
-上面这个示例使用 googleNet 组件绘制了一个简单的图表。其中 this.data 数组存储了三个人的数据，chart 变量存储了 D3plus 图表对象。
D3plus 选项
每个 D3plus 组件都有各自的选项，以进行针对性的配置。例如 chart 存储的是一个 googleNet 的图表对象，这个对象调用了 GoogleNet 类的 .render() 方法来渲染图表。同时 .render() 方法接受一个 JSON 格式的参数对象。
下面是一个完整的参数列表：
-- -------------------- ---- ------- - ---------- ----- - ----------- ----- --- ------- ------- --- -------- - ------- ------- ------- - -------- - ------- ------- ------- -------- ------- ------ -------- ------- ----- - ----------- ----- -------- - ------- ----- ------- --------- -------- ------ ------- - ------- ------------------- ----------- ------- -------- ------- - -------- - ------ - -------- - ------ - -------- - ------ ----- ------- ------ ------- -- -------- - ------- -- -------- - ------ -
自定义图表
相信上面的介绍应该足够让你使用 D3Plus 进行一些简单的数据可视化了。如果想要自定义一些功能，例如添加鼠标 hover 事件，增加元素，自定义样式等等，建议涉及 d3.js 或者 D3Plus 的官方文档查看。
总结
基于 Angular2 和 D3Plus 打造的这一 npm 包，在可视化数据方面提供了很多便利。使用数据可视化库进行数据的探索和分析是前端开发者的一项关键技能，希望本篇文章对你有所帮助。
示例代码
更多代码可参考：angular2-d3plus-demo。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600555a881e8991b448d2c4d