爲什麼我的節點懸停彈出窗口在我的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網絡中不起作用？

回答

相關問題