项目实训第四周（1）

现在可以在界面上显示所有的节点了，但这只是一个静态的页面，接下来为这些节点添加一些功能，首先是点击某用户，将用户及其收藏的食谱凸显出来，思路如下：声明一个函数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);
    });
  });