1. 什么是 ember-choice-d3
ember-choice-d3 是一个基于 d3.js 的 Ember.js 插件，它提供了可视化数据的各种类型的图表，如折线图、柱状图、饼图等。此外，它还支持多种图表的组合以及与滑块、下拉菜单等组件的交互。开发者可以用它快速的制作出交互式的数据可视化页面。
2. 安装
使用 ember-cli 可以方便地安装：
ember install ember-choice-d3
ember-choice-d3 主要依赖于 d3.js 语法，所以我们还需要使用 bower 安装最新版的 d3.js：
bower install d3 --save
3. 使用
使用 ember-choice-d3 前，我们需要先准备好数据。以下是一个简单的示例数据：
-- -------------------- ---- ------- -- ---- ----- ---- - - - ----- ----------- ------ -- -- - ----- ----------- ------ -- -- - ----- ----------- ------ -- -- - ----- ----------- ------ -- -- - ----- ----------- ------ -- -- - ----- ----------- ------ -- -- - ----- ----------- ------ -- -- --
使用 ember-choice-d3，只需新建一个组件并在模板中使用即可。例如，我们要制作一个简单的折线图：
-- -------------------- ---- -------
-- ----------------------------
------ ----- ---- --------
------ -- ---- -----
------ ------- ------------------------
------------------ -
----- --------- - -----------------------------
----- ------ - ----- --- ------ --- ------- --- ----- ----
----- ----- - --------------------- - ----------- - -------------
----- ------ - --- - ---------- - --------------
----- --------- - -------------------------
--- - - ----------------------------- --------
--- - - ------------------------------------ ----
--- ---- - ---------
---- -- -
------ ----------
--
---- -- -
------ -----------
---
--- --- - ----------------------------------
-------------- ----- - ----------- - -------------
--------------- ------ - ---------- - --------------
------------
------------------ -------------------------------------------
-------------- -- -
------ - ------------------
------- - ---------
---
------------------------ - -- -
------ -------
----
------------------------ - -- -
------ --------
----
---------------
------------------ -------------------------
------------------------
---------------
---------------------
---------------
------------- -------
------------------ --------------
---------- --
----------- ---------
-------------------- ------
------------ ------
------------------
------------
------------- -------
--------------- ------------
------------------------ --------
----------------------- --------
--------------------- ----
---------- ------
--
---以下是模板文件：
<!-- app/templates/index.hbs -->
<div class="line-chart"></div>
{{line-chart}}至此，我们已经可以在页面中看到一个简单的折线图了。
4. 总结
ember-choice-d3 是一个非常好用的数据可视化工具，它可以帮助我们快速制作出交互式的数据可视化页面。在使用过程中，需要注意数据的格式以及 d3.js 的语法。同时，它也非常容易进行二次定制和扩展。如果你有需要数据可视化的需求，不妨试试 ember-choice-d3。
完整示例代码：https://github.com/alexlafroscia/ember-choice-d3-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005540181e8991b448d15a8