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

我遇到了一个问题，即使我的节点对象中包含“标题”属性，当我将鼠标悬停在节点上时，也不会显示带有标题内容的弹出窗口。为什么我的节点悬停弹出窗口在我的vis.js网络中不起作用？

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

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

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

来源

2017-07-21 Ebuka

没有显示，因为您正在使用（“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()

来源

2017-08-14 14:14:11

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

回答

相关问题