简介
angular-es6-d3 是一个用于在 AngularJs 中结合 ES6 和 D3.js 的 npm 包。它提供了一些简单的 D3.js API，以便更容易地在 AngularJs 项目中使用 D3.js。本文将介绍如何使用 angular-es6-d3 包，并在自己的项目中使用 D3.js 实现一些数据可视化的场景。
安装
要使用 angular-es6-d3，需要加入它的 npm 依赖，命令如下：
npm install angular-es6-d3
使用
引入 angular-es6-d3
import angularES6D3 from 'angular-es6-d3';
在 AngularJs 模块中注入 angularES6D3 模块
const app = Angular.module('app', [angularES6D3]);使用 angularES6D3 服务
-- -------------------- ---- -------
------------------------- -------- ------------- -- -
-- ----
-----------------------------
--------------
-------------- ----
--------------- ----
---------------
---------- ---
---------- ---
-------------- ---
--------------- ----
-------------- -------
---示例
下面是一个使用 angular-es6-d3 来实现柱状图的例子。
HTML:
<div class="bar-chart chart-container"> <svg class="chart"></svg> </div>
JS:
-- -------------------- ---- -------
-- ------ ------------ ---- ----------------
----- --- - --------------------- ---------------
------------------------- -------- ------------- -- -
----- ---- - --- -- --- --- --- ---
----- ----- - ---
----- ------ - ---
----- - - ---------------------------
----------- ------------------------
---------- --------
-----------------------------
-------------- ------
--------------- -------
------------------
-----------
-----------------------
---------- --- -- -- -
------ - - ------ - ------------
--
---------- --- -- -
------ ------ - ----
--
-------------- ----- - ----------- - --
--------------- --- -- -
------ ----
--
--说明：
该代码将一组数据绑定到 rect 元素上，并通过设置 rect 的位置来形成柱状图。在这个例子中，柱状图的x轴和y轴都是简单比例缩放到容器的大小。如果要改变缩放函数，只需修改该函数即可。
在这个例子中，angular-es6-d3 的作用是仅仅为了让 D3.js 更好地与 AngularJs 集成。无论使用什么调用 D3.js 的方式，都可以与 angular-es6-d3 包配合使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590e81e8991b448d67c9