现在可以在界面上显示所有的节点了,但这只是一个静态的页面,接下来为这些节点添加一些功能,首先是点击某用户,将用户及其收藏的食谱凸显出来,思路如下:声明一个函数mute(),功能为:增加节点与边的透明度,再声明一个函数unmute(),功能为降低节点与边的透明度,然后为用户节点添加click的一个函数:当一个用户节点被点击时,界面中所有节点执行mute()函数,同时该节点和所有与其相连的食谱节点再执行unmute()函数,就实现了突出当前用户节点和食谱,淡化所有其他节点与边的功能。
function mute(node) {
if (!~node.getAttribute('class').search(/muted/))
node.setAttributeNS(null, 'class', node.getAttribute('class') + ' muted');
}
function unmute(node) {
node.setAttributeNS(null, 'class', node.getAttribute('class').replace(/(\s|^)muted(\s|$)/g, '$2'));
}
$('.sigma-node').click(function() {//点击node触发的function
// Muting
$('.sigma-node, .sigma-edge').each(function() {
mute(this);
});
// Unmuting neighbors
var neighbors = s.graph.neighborhood($(this).attr('data-node-id'));
neighbors.nodes.forEach(function(node) {//突出当前淡化其他nodes
unmute($('[data-node-id="' + node.id + '"]')[0]);
});
neighbors.edges.forEach(function(edge) {//突出当前淡化其他edges
unmute($('[data-edge-id="' + edge.id + '"]')[0]);
});
});
s.bind('clickStage', function() {//点击stage复原
$('.sigma-node, .sigma-edge').each(function() {
unmute(this);
});
});