如何使 vis.js 中的节点可点击?
How to make a node in vis.js clickable?
我正在尝试使节点可点击,但它不起作用
我是 javascript 的初学者,所以请帮助我。
我已经使用 vis.js library.I 希望当有人点击节点时它应该重定向到 url 中的网页。
我尝试通过给定的示例进行更改,但它不起作用。
提前谢谢你。
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);
});
你明白我被点击了吗?在控制台?
你得到点击的节点:了吗?在控制台?
你在控制台有任何错误吗?
我正在尝试使节点可点击,但它不起作用
我是 javascript 的初学者,所以请帮助我。 我已经使用 vis.js library.I 希望当有人点击节点时它应该重定向到 url 中的网页。 我尝试通过给定的示例进行更改,但它不起作用。
提前谢谢你。
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);
});
你明白我被点击了吗?在控制台?
你得到点击的节点:了吗?在控制台?
你在控制台有任何错误吗?