前言
D3.js 是一个结合 HTML, CSS, JS 实现数据可视化的类库。其中，d3-brush 是一个 D3.js 的插件，提供了对 D3.js 所生成的图表进行刷选、缩放等交互操作的支持。本文将介绍使用 @types/d3-brush 这个 npm 包，为 TypeScript 项目提供 d3-brush 的类型定义，以方便我们在代码中调用 d3-brush 的 API。
安装
在 TypeScript 项目中使用 d3-brush，我们需要首先安装 d3-brush 的 TypeScript 类型定义。输入以下命令安装：
npm install @types/d3-brush
同时，在 tsconfig.json 中添加以下配置：
{
"compilerOptions": {
"types": ["d3-brush"]
}
}使用
1. 导入
我们使用 import 语句来导入 d3-brush 所提供的类型定义：
import * as d3brush from 'd3-brush';
2. 建立刷选器
创建 d3-brush 刷选器的方法如下：
const brush = d3brush.brush();
调用 brush() 方法返回的是一个 brush 对象，它是一个可以在 d3 生成的图形对象上实现缩放和刷选交互的对象。
3. 配置刷选器
brush 是一个可配置对象，我们可以设置它的一些属性配置。例如，设置刷选区域的范围：
brush.extent([[0, 0], [width, height]]);
其中，width 和 height 分别是图表的宽和高。
4. 监听刷选事件
brush.on('brush end', brushed);其中，brushed 是回调函数，代码如下：
-- -------------------- ---- -------
-------- --------- -
-- ------------------- --- ----- -
-- ---
-------------------
- ---- -
-- --------------
----- ----- ---- ---- ---- - --------------------
-------------------- --- --- --- ----
-
-5. 应用刷选器
将我们所创建的 brush 应用到图表上：
d3.selectAll(".my-graphic-elements")
.call(brush);其中，".my-graphic-elements" 是我们需要添加 d3-brush 的 svg 图形元素的选择器。
示例代码
最后，我们来看一个完整的示例代码：
-- -------------------- ---- -------
------ - -- -- ---- -----
------ - -- ------- ---- -----------
-- -- --- --------
----- --- - -------------------------------
-------------- ----
--------------- -----
----- ---- - --- -- -- -- ---
----- - - ----------------
----------- ----------- - ---
----------- ------
----- - - ----------------
----------- ---------------
------------ -----
----- ----- - -----------------
----- ----- - ---------------
---------------
-------------- -------
------------------ ------------- ------
-------------
---------------
-------------- -------
------------------ -------------- ----
-------------
----- ---- - -----------------
------ -- -- -----
------ -- -----
--------------------------------------
------------------
------------
------------- -------
--------------- -------
--------------------- --
---------- ------
-- -- ----- --
----- ----- - ----------------
-- -- ----- -------
------------------ ---- ----- -------
-- -- ----- --- ----- - --- --
--------------- ----- ---------
-- ------
----- --------- - ---------------
-------------- ---------
----------------------
-------- --------- -
-- ------------------- --- ----- -
-------------------
- ---- -
----- ----- ---- ---- ---- - --------------------
-------------------- --- --- --- ----
-
-
结语
通过上面的介绍和示例代码，相信大家已经掌握了使用 @types/d3-brush 这个 npm 包来实现在 TypeScript 项目中使用 d3-brush 的方法。下次你需要在你的网站中加入交互性的 “缩放和刷选” 功能，使用 d3-brush 就是一个非常不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedad3cb5cbfe1ea0610c0e