获取通过其链接连接的所有节点

时间:2016-06-24 04:19:29

标签: javascript d3.js nodes

是否有人已经知道如何获取通过其链接连接的所有节点。

这是我目前的代码,仅适用于一个级别:

 var connectedLinks = [];
.on('mouseover', function(d) {   
  link.style('stroke-width', function(l) {
        if (d === l.source || d === l.target) {
          connectedLinks.push({type: 'direct', s: l.source.index, t: l.target.index});
        return 5;
      } else {
         connectedLinks.push({type: 'indirect', s: l.source.index, t: l.target.index});
        return 4;
      }
  });

我的jsfiddle Nodes Highlighting

我的迭代链接的功能

function checkIfLinkIsInPipeline(){
 for(var i in connectedLinks){
   if(connectedLinks[i]['type'] == "indirect") {
     console.log("a " + JSON.stringify(connectedLinks[i]));  
     digNeighbor(connectedLinks[i]['s'], connectedLinks[i]['t']);        
   }
 }
}

  function digNeighbor(s, t) {
    for(var j in connectedLinks) {
      if(connectedLinks[j]['type'] == "direct"){
        console.log("b " + JSON.stringify(connectedLinks[j]));  
      }

if(connectedLinks[j]['type'] == "direct" &&
   (connectedLinks[j]['s'] == s ||
    connectedLinks[j]['s'] == t ||
    connectedLinks[j]['t'] == s ||
    connectedLinks[j]['t'] == t)) {
    connectedLinks.push({type: "direct", s: s, t: t});
    console.log("changed to direct " + JSON.stringify({type: "direct", s: s, t: t}));
  }
}
}

1 个答案:

答案 0 :(得分:1)

好的,我在这个jsfiddle中得到了效率低下的样本。你应该可以将它应用到你的小提琴上。

重要的代码在这里:

.on('mouseover', function fillBlue(datum, index) {
    console.log('firing for ', this);
    d3.select(this).style("fill", "aliceblue");
    links.forEach(function(link) {
      if (link.source.index === index) {
        svg.selectAll('.node').each(function(d, i) {
          if (i === link.target.index) {
            fillBlue.call(this, d, i);
          }
        })
      }
    })
  })

让我们一步一步地完成它。

  1. 我们为当前节点应用填充样式。
  2. 然后我们找到从当前节点开始的链接。
  3. 然后我们找到从这些链接结束的所有节点
  4. 我们为这些节点调用此函数。