d3.event.active报错原因

前面在非vue项目中使用时, 我们都是采用在线引入v5版本的方式, 将之前的代码修修改改复制粘贴到vue项目里的时候, 会遇到一个问题:

当绘制力引导的图的时候是成功的, 但是当我们试图拖动节点的时候, 会发现节点无法被拖动, 而且红色选中的这两行会报错, 但在之前的v5版本中, 是没有这个问题的.

错误代码:

报错信息:

网上并没有找到相应的资料, 只发现了某国外网站针对这个问题的两个提问, 所以只能靠自己发现问题了.

首先要知道这几个函数 started, dragged, ended 是用来控制节点拖拽的.
打个断点, 我们可以看到传入的d的具体数据:

d 下面有 active, 所以猜测可以直接把 if 条件改成 !d.active, 再结合 d3实例这部分的代码 (虽然结构不一样但是有参考意义):

最终把代码修改成下面这个样子, 发现节点可以正常被拖动啦!

            function started(d) {
                if (!d.active) {
                    forceSimulation.alphaTarget(0.8).restart();
                }
                d.subject.fx = d.subject.x;
                d.subject.fy = d.subject.y;
            }
            function dragged(d) {
                d.subject.fx = d.x;
                d.subject.fy = d.y;
            }
            function ended(d) {
                if (!d.active) {
                    forceSimulation.alphaTarget(0);
                }
                d.subject.fx = null;
                d.subject.fy = null;
            }

效果:

可以参考这篇文章中的d3 -力引导图(四) vue项目中的使用及可能遇到的问题