d3.js v7版本框选的实现（结合cosmograph的api实现框选区域的节点高亮）

场景

该文章中d3.jsV7版本框选的实现是指实现框选功能最终拿到了框选矩形的位置坐标。

最近有需求要求大规模数据的展示，要求能展示几万条节点和几万条边。产品中使用的是g6，貌似会卡顿，领导推荐了一个插件cosmograph，插件的其中一个demo与github地址如下。
插件的demo地址
github地址
回到正题，该插件确实能支持数十万条数据，仅能展示，我们要求要能对图中节点进行一些分析，于是提出添加一个框选功能，框住一些节点和边后，回到我们已经开发的使用g6的那个页面去分析（该页面已经具备一些分析功能）。
于是上网查找和研究cosmograph的demo上的框选，原来是使用d3的brush来实现的框选功能。

解决

第一步：安装d3.js（我安装的最新版V7+）

npm install d3 --save

第二步：引入d3

import * as d3 from 'd3'

第三步：具体代码

html

<canvas id="canvas" />//这是cosmograph的图
<i class="iconfont icon-kuangxuan" @click="brushSelect" /> //框选按钮
<svg id="brushContainer" width="100%" height="100%