什么是 @alex-wilmer/lolliplot
@alex-wilmer/lolliplot 是一个基于 D3.js 的可视化库，用于绘制棒棒糖图表。棒棒糖图表是一种特殊的饼图，可以用来展示多个维度的关系。该库支持响应式设计，支持各种图表设置以及交互。
安装
可以通过 npm 或 yarn 来安装 @alex-wilmer/lolliplot。请先确保您的项目中已安装了 D3.js。
npm i @alex-wilmer/lolliplot # 或者 yarn add @alex-wilmer/lolliplot
使用
基本用法
在浏览器中添加以下引用：
<script src="https://d3js.org/d3.v5.min.js"></script> <script src="./node_modules/@alex-wilmer/lolliplot/dist/lolliplot.min.js"></script>
然后在 JavaScript 中绘制一个棒棒糖图表：
-- -------------------- ---- -------
----- --------- - --- -------------------
-----------------
----- ----- ---
------ ----
------ ---------
-- -
----- ----- ---
------ ----
------ ---------
-- -
----- ----- ---
------ ----
------ ---------
---在上例中，我们在 #chart 元素中添加了一个新的棒棒糖图表，并将数据源中的三个对象作为参数传入。每个对象表示一个数据点，包含了名称、值和颜色信息。
函数列表
constructor(selector: string, options?: object): 创建一个新的棒棒糖图表，selector表示图表的容器选择器，options包含各种可选项。data(data: Array<{name: string, value: number, color: string}>, options?: object): 设置数据源，data是一个对象数组，每个对象包含三个属性：名称、数值和颜色信息。options包含各种可选项。updateData(data: Array<{name: string, value: number, color: string}>, options?: object): 更新数据源，可以动态地改变数据源中的值。options包含各种可选项。options(options: object): 设置图表的各种选项，包括颜色、边界、线条、标签、动画等等。redraw(options?: object): 重新绘制图表。clear(): 清除图表。
深入学习
@alex-wilmer/lolliplot 是一个非常简单易用的可视化库，但是深入学习可以帮助我们更加深入了解其底层的设计原理，也可以帮助我们更好地掌握其高级功能和扩展能力。
数据绑定
在 D3.js 中，数据绑定是非常重要的概念。在 lolliplot 中，数据绑定也是绘制过程中的关键步骤。当我们使用 lolliplot.data 方法时，实际上是将数据源与 DOM 元素绑定在了一起，然后使用 D3.js 的链式调用来处理数据和元素之间的关系。
界面更新
在 lolliplot 中，每次更新图表都需要执行 lolliplot.redraw 方法。在这个过程中，会读取最新的数据和选项设置，然后重新计算和绘制图表。由于 lolliplot 采用了响应式设计，因此当调整窗口大小或改变容器大小时，图表会自动重新绘制以适应新的区域。
事件处理
在 lolliplot 中，可以通过 lolliplot.on 方法来注册各种自定义事件。比如当鼠标移动到某个数据点时，可以触发一个 tooltip 显示该点详细信息。
lolliplot.on('mouseover', function(d) {
// 显示 tooltip
})同时，也可以通过事件委托的方式来注册全局事件。比如当用户在图表周围拖动时，可以改变图表的选项设置以实现交互效果。
高级功能
除了基本的绘制和样式设置外，lolliplot 还支持各种高级功能，包括锁定区域、图例、标签、动画、导出和扩展等。这些功能可以提高可视化效果，增加用户体验，也可以扩展库的功能和应用场景。
实战示例
在最后，我们来看一个实际案例，以展示 lolliplot 的高级应用。这个案例展示了一个带有多个视图的棒棒糖图表，其中一个视图可以根据用户选择来调整大小和位置。
-- -------------------- ---- -------
----- ----- - --
--- --------
----- --------
-------- -----
--
-
--- --------
----- --------
-------- -----
--
-
--- --------
----- --------
-------- -----
-
-
--- -------------- - -------
----- --------- - -------------------
----- -------------- - ---------------------------------------- -----
----- ----------------- - ------------------------------------------- -----
-- -------
---------------------------------
------------
--------
--------------
---------------- -----
-------------------- - -- ---- --- ---------------
--------------
----------------- -
-- -------
----- --- - ---------------
----- --------- - --- -------------- ----------
----------------------
--
-- ------
--------------------------------------
------------
--------
--------------
------------------ -----
-------------------- - -- ---- --- ---------------
------- -- -----
------------ ----------- -
-- ----
-------------- - ----
---------------------------------
-------------------- - -- ---- --- ---------------
--------------------------------------
-------------------- - -- ---- --- ---------------
-- ------
---------------------------------
--------- -- ---- --- ---------------
--------------
----------------- -
----- --------- - --- -------------------------- ----------
----------------------
--
--在这个案例中，我们在 HTML 中添加一个 id 为 chart 的元素作为容器，然后使用 D3.js 分别添加了两个子元素：一个用于显示各个视图的容器，另一个用于显示选择器。然后使用 JavaScript 中的 views 数组来存储各个视图的信息（数据源、选项等），然后根据用户选择来动态地修改当前视图的设置和数据源。
这个案例展示了 lolliplot 的很多高级功能，包括动态绘制、交互、事件处理、HTML5 兼容等等，同时也为大家提供了一个创造性的思路：将各个独立的棒棒糖图表组合成一个更大的图表。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557f081e8991b448d503d