为力导向图添加缩放移动特性

在没有Echarts 之前，D3是图表项目的最佳选择，而有了Echarts，以及AntV之后，D3在图表领域就渐渐的失去了优势。貌似没看见有力导向图的轮子可用，d3开搞！

过程👉

d3仓库：d3/d3: Bring data to life with SVG, Canvas and HTML. (github.com)

从头开始未免太慢了，我找到了一个vue封装一层的组件，打开示例各项参数都挺符合我的要求，不过有一点就是不能鼠标缩放，这样看不到的地方就永远看不见了，这点难道作者没有考虑到吗，疑惑。

为了添加自己的逻辑，找到组件位置src/vue-d3-network.vue，

引入需要的工具包📦

// 选中svg标签用
import { select } from "d3-selection";
// 放缩画布
import * as zoom from "d3-zoom";
// 合并到d3上
const d3 = Object.assign({}, forceSimulation, { select }, zoom);

以前还说requirejs不能tree shaking，用这种写法直接都不用考虑打包工具了，天生tree shaking，哈哈哈。

为了能整体缩放，添加容器包裹住所有节点和边：

<svg class="net-svg">
 <g class="ground">
 	<g class="node"></g>
 	<g class="link"></g>   
 </g>
</svg>

将就看吧，不支持PUG模板标签。。

在methods中，找到resize时执行的animate方法，在下面添加自己的逻辑：

// vue.methods...
animate() {
    // simulation restart...
    const vm = this;
    function zoomed({ transform }) {
        // 缩放后记录当前缩放等级
        vm.transform = transform;
        // 缩放的是容器
        d3.select(".ground").attr("transform", transform);
    }
    // 选中svg标签，添加zoom事件
    d3.select(".net-svg").call(
        d3.zoom()
        .extent([
            [0, 0],
            [this.size.w, this.size.h],
        ])
        .scaleExtent([1, 8])
        .on("zoom", zoomed)
    );
},

放大后效果（图片5M，耐心等待☕）：

这时已经可以缩放了，但是鼠标点击节点和标签时还有偏移，需要将transform加回来。

// 鼠标拖动节点事件处理方法
move(event) {
    if (!this.dragging) return;
    let pos = this.clientPos(event);
    if (this.nodes[this.dragging]) {
        this.simulation.restart();
        this.simulation.alpha(0.5);
        // 将现在缩放等级加回来
        const _trans = this.transform;
        this.nodes[this.dragging].fx = (pos.x - _trans.x) / _trans.k;
        this.nodes[this.dragging].fy = (pos.y - _trans.y) / _trans.k;
    }
},