我试图使节点可点击,但它无法正常工作
我是javascript初学者所以请帮助我。我使用过vis.js库。我想当有人点击节点然后它应该重定向到网址中的网页。我尝试通过给定的示例进行更改,但它无法正常工作。
先感谢您。
var graph ={nodes:[{id:0,group:'Mission Learning',label:"Content Tech + QA",url:'http://www.youtube.com',shape:'box'},{id:1,group:'Mission Learning',label:"Content Hygiene / Launch Automation",url:'http://www.google.com',shape:'box'}],edges:[{from:0,to:1}]};
function destroy() {
if (network !== null) {
network.destroy();
network = null;
}
}
function draw() {
destroy();
var nodes = graph.nodes;
var edges = graph.edges;
// randomly create some nodes and edges
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
edges:{
color:{color:'white'},
width: 2,
arrows: {
to: {enabled: true, scaleFactor:.5, type:'arrow'}
}
},
nodes: {
borderWidth:2,
size:50,
color: {
border: '#222222',
background: 'grey'
},
font:{color:'black',
size: 40,
face :'arial',
},
margin: {
top: 20,
bottom: 20,
left: 20,
right: 20
}
},
physics: {
forceAtlas2Based: {
gravitationalConstant: -350,
centralGravity: 0.05,
springLength: 400,
springConstant: 0.01,
avoidOverlap:10
},
maxVelocity: 20,
minVelocity:0,
solver: 'forceAtlas2Based',
timestep: 0.10,
stabilization: {enabled:false,iterations: 0}
},
interaction: {
multiselect: true,
dragView: true
},
edges: {
smooth: false,
arrows: {to : true }
}
};
network = new vis.Network(container, data, options);
network.on( 'click', function(properties) {
var ids = properties.nodes;
var clickedNodes = nodes.get(ids);
console.log('clicked nodes:', clickedNodes);
});
}
你有什么问题? 您的代码是否达到了点击事件?
尝试:
network.on( 'click', function(properties) {
console.log('I\'m clicked');
var ids = properties.nodes;
var clickedNodes = nodes.get(ids);
console.log('clicked nodes:');
console.log(clickedNodes);
});
你点击了我吗?在控制台? 你得到点击的节点:?在控制台? 你在控制台上有任何错误吗?