d3 -力引导图(四) vue项目中的使用及可能遇到的问题(v7版本)

如果采用npm方式安装d3的话, 一般默认都会安装最近的版本, 目前d3已经更新到了 v7版本.

vue中安装d3:

npm install d3 --save-dev

或者

cnpm install d3 --save-dev

然后在组件中引入d3:

import * as d3 from 'd3';

问题一 节点拖动

前面在非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;
            }

效果:

问题二 绑定事件

之前在v5版本中添加双击事件, 是可以正常地在警示框中展示节点内容的.

之前的代码:

但是在vue安装的v7版本中, 发现双击事件不管用了, 弹出 undefined, 于是我把 n 输出了一下, 发现 n 变成了一个事件, 而不是当前的节点信息了:

抱着侥幸心理, 我在function中传入了两个参数, 发现第二个参数中才包含当前节点的信息:

弹框中也可以看到正确的信息了:

绘制节点, 节点文本和绑定事件这部分的代码为:

            //draw nodes group = node+node-text
            var nodes_g = svg.append("g")
                .selectAll("g")
                .data(data.nodes)
                .enter()
                .append("g")
                .attr("transform", function (e) {
                    return "translate(" + e.x + "," + e.y + ")";
                })
                .call(d3.drag()
                    .on("start", started)
                    .on("drag", dragged)
                    .on("end", ended));
            //draw nodes
            nodes_g.append("circle")
                .attr("r", function (e) {
                    return e.relation_num * 5
                })
                .attr("fill", function(n){
                    for(let i = 0; i<ontologyList.length;i++){
                        if(n.ontology_name == ontologyList[i]){
                            return d3.interpolateSpectral(scale(i))
                        }
                    }
                })
                

            //draw node-text
            nodes_g.append("text")
                .attr("x", -15)
                .attr("y", 20)
                .attr("font-size", 10)
                .text(function (e) { return e.entity_name });


            nodes_g.on("dblclick", function(n,i){
                    alert(i.entity_id)
            });