D3如何突出显示两个链接以外的图节点？

Question

我想突出显示与鼠标悬停的节点相连的所有节点，最多两个链接。

See the graph in JS fiddle.

这就像一个视觉广度优先搜索，具有两个深度。

我的灵感来自almsuarez（d3v4）强制布局，其中突出显示了https://bl.ocks.org/almsuarez/4333a12d2531d6c1f6f22b74f2c57102（我以此为基础，只是交换了数据）。这是根据与当前饮料/节点（某人喜欢的饮料）相关的口味来查找推荐的饮料。

严格来说，它不是亮点，而是图形的无关部分的淡化，既美观又整洁。 las，我不确定如何扩展衰落，isConnected和linkedByIndex方法。我见过创作者和很多D3大贡献者一遍又一遍地使用这些相同的方法，但是我无法绕过流程，对这些注释的缺乏使我凝视虚空的时间长于我公开承认的时间。非常感谢您对如何解决此搜索问题有任何见解，我对linkedByIndex const的工作原理特别感兴趣？

非常感谢您。

var node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
    .attr("r", function(d) { return d.count })
    .attr("fill", function(d) {
      if (d.root == "true") return color(d.root);
      return color(d.type);
    })
    .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended))

      .on('mouseover.fade', fade(0.1))
      .on('mouseout.fade', fade(1))
;

  const linkedByIndex = {};
  graph.links.forEach(d => {
    linkedByIndex[`${d.source.index},${d.target.index}`] = 1;
  });

  function isConnected(a, b) {
    return linkedByIndex[`${a.index},${b.index}`] || linkedByIndex[`${b.index},${a.index}`] || a.index === b.index;
  }

  function fade(opacity) {
    return d => {
      node.style('stroke-opacity', function (o) {
        const thisOpacity = isConnected(d, o) ? 1 : opacity;
        this.setAttribute('fill-opacity', thisOpacity);
        return thisOpacity;
      });
  link.style('stroke-opacity', o => (o.source === d || o.target === d ? 1 : opacity));

};

}