javascript - 处理 Mouseevent 的更有效方法

Question

我已经实现了桑基图，能够通过图表跟踪节点路径。然而，就功能而言，用户必须鼠标输入节点才能突出显示和删除节点路径的突出显示。在 mouseenter 上突出显示节点的路径，然后在 mouseout 上删除该突出显示(通过不透明度更改)的好方法是什么？顺便说一句，我尝试仅调用使用 mouseenter 和 mouseout 组合的函数，但这似乎没有解决问题。这是我的代码:

function highlightNodeLinks(node, i) {

    var remainingNodes = [],
        nextNodes = [],
        strokeOpacity = 0,
        traverse;

    if ( d3.select(this).attr('data-hover') === '1' ) {
      d3.select(this).attr('data-hover', '0');
      strokeOpacity = 0.2;
    } else {
      d3.select(this).attr('data-hover', '1');
      strokeOpacity = 0.5;
    }

    traverse = [{
      linkType : 'sourceLinks',
      nodeType : 'target'
    }, {
      linkType : 'targetLinks',
      nodeType : 'source'
    }];

    traverse.forEach(function (step) {
      node[step.linkType].forEach(function (link) {
        remainingNodes.push(link[step.nodeType]);
        highlightLink(link.id, strokeOpacity);
      });

      while (remainingNodes.length) {
        nextNodes = [];
        remainingNodes.forEach(function (node) {
          node[step.linkType].forEach(function (link) {
            nextNodes.push(link[step.nodeType]);
            highlightLink(link.id, strokeOpacity);
          });
        });
        remainingNodes = nextNodes;
      }
    });
  }

  function highlightLink(id, opacity) {
    d3.select('#link-' + id).style('stroke-opacity', opacity);
  }

其名称如下:

  .on('mouseover', highlightNodeLinks)

一如既往，提前感谢您的任何考虑和建议。

Answer 1

分两步:首先是预处理，以便每个节点“知道”鼠标悬停时必须突出显示的链接集。这对于内存来说很重(它不会针对非常大的图形进行扩展)，但应该更具响应性

//call this once after loading the data and first drawing of the links
node.forEach(function(n) {

 linkIds= []; //add this field to each node

 traverse.forEach(function (step) {
   node[step.linkType].forEach(function (link) {
     remainingNodes.push(link[step.nodeType]);
     linkIds.push(link.id);
   });

   while (remainingNodes.length) {
    nextNodes = [];
     remainingNodes.forEach(function (node) {
      node[step.linkType].forEach(function (link) {
         nextNodes.push(link[step.nodeType]);
         linkIds(link.id);
       });
     });
     remainingNodes = nextNodes;
   }

   //add the list of links to a new  field in the node
   //& transform already ids into d3 selections
   n.linksToHighlight = linkIds.map(function(id) {return d3.select("link-"+id)})
 });

然后，然后突出显示代码:

function highlighter(ratio) {
  return function(node) {
     node.linksToHighlight.forEach(function (s) {s.style("stroke-opacity",ratio})
  }
}


[select nodes]
 .on('mouseenter', highlighter(0.5) )     
 .on('mouseout', highlighter(1) )