为什么我的节点悬停弹出窗口在我的vis.js网络中不起作用? [英] Why don't my node hover popups work in my vis.js network?

问题描述

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

I am having an issue where despite including the 'title' property in my node objects, when I hover over a node, no pop up window with the contents of my title are displayed.

这是我的选择以及如何设置网络.

Here are my options and how I set my network up.

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);
}

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

When I add a node to my list of nodes for my network, this is my structure:

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) {}
}

我从中运行代码的环境很难实时提供此问题的示例.当我将鼠标悬停在节点上时，网络中的其他所有内容都可以正常工作(标签，标识，颜色)，而标题不起作用.

The environment that I'm running my code from makes it difficult to provide an example of this issue live. Everything else in the network works just fine (label, id, color), just not the title when I hover over a node.

编辑:

我从vis.js的此示例复制了此代码ups在工作.

I copied this code from this example from vis.js where pop ups are working.

// 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);

我尝试在我的环境中仅使用此功能；但是，弹出窗口不会像示例中那样显示.我知道我的悬停事件有效，因为当我将鼠标悬停在节点上时，我包括以下代码以打印到控制台:

I tried using only this in my environment; however, the popups don't show up like in the example. I know my hovering event works because I included this code to print to console when I hover over a node:

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

这里是否缺少一些选项设置?关于为什么尽管我的节点对象中包含"title"属性，但为什么我的悬停弹出窗口却没有显示出来，所以还有其他问题吗?

Is there some options setting that I'm missing here? Could there be some other issue as to why my hover popups don't show despite including the "title" property in my node objects?

推荐答案

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

Nothing is showing because you are using event on("showPopup"). You have to use on("hoverNode"). So use

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


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

要添加节点，最好使用

nodes.add()

这篇关于为什么我的节点悬停弹出窗口在我的vis.js网络中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！