我遇到一个问题,尽管在节点对象中包含“标题”属性,但当我将鼠标悬停在节点上时,没有显示包含标题内容的弹出窗口。
以下是我的选择以及我如何设置网络。
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、颜色),只是当我将鼠标悬停在节点上时标题不起作用。
EDIT:
我从以下位置复制了这段代码这个例子 http://visjs.org/examples/network/events/interactionEvents.html来自 vis.js,弹出窗口正在工作。
// 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");
})
我在这里缺少一些选项设置吗?尽管在我的节点对象中包含“title”属性,但为什么我的悬停弹出窗口不显示,是否还有其他问题?