为什么我的节点悬停弹出窗口在我的 vis.js 网络中不起作用？答案

【问题标题】：Why don't my node hover popups work in my vis.js network?为什么我的节点悬停弹出窗口在我的 vis.js 网络中不起作用？
【发布时间】：2017-07-21 08:12:38
【问题描述】：

我遇到了一个问题，尽管在我的节点对象中包含“标题”属性，但当我将鼠标悬停在节点上时，没有显示包含我的标题内容的弹出窗口。

这是我的选项以及我如何设置网络。

setUpNetwork(){
    let container = document.getElementById('mynetwork');
    //These options dictate the dynamic of the network
    let options = {
        nodes: {
            shape: 'box'
        },
        interaction: {
            dragNodes: false,
            dragView: false,
            hover: true
        },
        layout: {
            randomSeed: undefined,
            improvedLayout: true,
            hierarchical: {
                enabled: true,
                levelSeparation: 180,
                nodeSpacing: 180,
                edgeMinimization: true,
                parentCentralization: true,
                direction: 'UD', // UD, DU, LR, RL
                sortMethod: 'directed' // hubsize, directed
            }
        },
        physics: {
            enabled: false
        }
    }
    // initialize your network!
    this.network = new vis.Network(container, this.data, options);
}

当我将一个节点添加到我的网络的节点列表中时，这是我的结构：

addNode(node: any){
    try {
        this.data.nodes.add({
            id: node.id,
            color: node.color,
            title: node.title,
            label: node.label
        });
        this.network.fit();
    }
    catch (err) {}
}

我运行代码的环境使得很难现场提供这个问题的示例。网络中的其他所有内容都可以正常工作（标签、ID、颜色），当我将鼠标悬停在节点上时，标题就不行了。

编辑：

我从 vis.js 的 this example 复制了这段代码，其中弹出窗口正在工作。

// create an array with nodes
var nodes = new vis.DataSet([
    {id: 1, label: 'Node 1', title: 'I have a popup!'},
    {id: 2, label: 'Node 2', title: 'I have a popup!'},
    {id: 3, label: 'Node 3', title: 'I have a popup!'},
    {id: 4, label: 'Node 4', title: 'I have a popup!'},
    {id: 5, label: 'Node 5', title: 'I have a popup!'}
]);

// create an array with edges
var edges = new vis.DataSet([
    {from: 1, to: 3},
    {from: 1, to: 2},
    {from: 2, to: 4},
    {from: 2, to: 5}
]);

// create a network
var container = document.getElementById('mynetwork');
var data = {
    nodes: nodes,
    edges: edges
};
var options = {interaction:{hover:true}};
this.network = new vis.Network(container, data, options);

我尝试在我的环境中只使用它；但是，弹出窗口不像示例中那样显示。我知道我的悬停事件有效，因为当我将鼠标悬停在节点上时，我包含了此代码以打印到控制台：

this.network.on("showPopup", function (params) {
    console.log("DO SOMETHING");
})

我在这里缺少一些选项设置吗？尽管在我的节点对象中包含“标题”属性，但为什么我的悬停弹出窗口不显示，是否还有其他问题？

【问题讨论】：

你能解决问题吗？我也面临同样的问题。请帮忙

标签： javascript node.js typescript vis.js vis.js-network

【解决方案1】：

没有显示任何内容，因为您正在使用事件 on("showPopup")。您必须使用 on("hoverNode")。所以使用

network.on("hoverNode", function(){
  // functionality for popup to show on mouseover
});


network.on("blurNode", function(){
  // functionality for popup to hide on mouseout
});

添加节点更好用

nodes.add()

【讨论】：

标题应该在没有使用悬停函数的情况下显示，因为我们正在定义标题。但它没有显示。不确定是什么问题。陷入同样的问题。

【解决方案2】：

我遇到了同样的问题。就我而言，这是一个 CSS 问题。确保正确导入 vis.min.css。我在链接声明中有错字。

【讨论】：

【解决方案3】：

发生这种情况是因为您可能没有导入 vis-network CSS。您可以导入 vis-network 的独立版本，它会自动导入 CSS。

import { Network } from 'vis-network/standalone';

【讨论】：