介绍
d3-ng2-demo是一个基于D3.js可视化库的Angular 2 Demo项目，旨在帮助开发者更好地使用D3.js库。
这个Demo项目框架中已经封装好了一些D3.js的特效，可以直接使用，同时，也可以在此基础上进行二次开发。
安装
执行下面的命令进行安装：
npm install d3-ng2-demo --save
使用
- 引入d3-ng2-demo模块
在你的模块中引入d3-ng2-demo模块：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - --------------- - ---- --------------
------ - ------------ - ---- ------------------
-----------
-------- -
--------------
---------------
--
------------- -
------------
--
---------- --------------
--
------ ----- --------- - -- 使用d3-ng2-demo组件
在你的template中使用d3-ng2-demo组件：
<d3-ng2-demo></d3-ng2-demo>
支持的特效
目前，d3-ng2-demo已经封装了如下特效：
散点图（scatter）
<scatter width="500" height="300" padding="30" [data]="scatterData"></scatter>
-- -------------------- ---- ------- ----- ----------- - - --- --- -- ---- --- --- -- ---- --- --- -- ---- --- --- -- ---- --- --- -- ---- -- ------------ --- -- ------ ----- ------------ - ----------- - ------------ -
饼图（pie）
<pie width="500" height="300" padding="30" [data]="pieData"></pie>
-- -------------------- ---- ------- ----- ------- - - ------ ---- ------ ----- ------ ---- ------ ----- ------ ---- ------ ----- ------ ---- ------ ----- -- ------------ --- -- ------ ----- ------------ - ------- - -------- -
折线图（line）
<line width="500" height="300" padding="30" [data]="lineData"></line>
-- -------------------- ---- ------- ----- -------- - - --- -- -- ----- --- --- -- ----- --- --- -- ----- --- --- -- ----- --- --- -- ----- --- --- -- ----- -- ------------ --- -- ------ ----- ------------ - -------- - --------- -
结语
d3-ng2-demo提供了一个方便快捷地使用D3.js特效的Demo项目框架，可以帮助新手更快地入门D3.js库。同时，也可以在此基础上进行二次开发，实现更为丰富的可视化特效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c2781e8991b448d9c52