D3.js 在节点选择上突出显示链接答案

【问题标题】：D3.js Highlighting links on node selectionD3.js 在节点选择上突出显示链接
【发布时间】：2016-03-08 09:03:56
【问题描述】：

首先，我的数据格式与下面的 miserables.json 相同 https://bl.ocks.org/mbostock/4062045

当我单击节点时，我希望能够使连接到我的节点的链接变为红色。所以 psuedo⁻code 就像

selectAll(.links)
if links.source=nodeID or links.target=nodeID
then links.color=red

但是我做不到。我的最终目标是将它与下面的弧图集成 http://bl.ocks.org/sjengle/5431779

【问题讨论】：

标签： d3.js hyperlink highlight

【解决方案1】：

您的伪代码是一个好的开始。您可以使用 filter 在选择中实现 if 条件。注意链接的.source和.target是d3编辑的，不再是节点的id，而是节点本身：

thisNode = nodeObject; // where nodeObject is the javascript object for the node, it's probably called "d" in your function.
d3.selectAll(".link")
  .filter(function(d) {
     return (d.source === thisNode) || (d.target === thisNode);
   })
  .style("stroke", "red")

【讨论】：

非常感谢您和 Mehdi El Fadil。作为像我这样的初学者的附加信息，您必须在 append() 使用 SelectAll() 时为链接设置 attr(class)。我在这上面浪费了很多时间

【解决方案2】：

在@laurent 的回答之上扩展，以“重置”在先前交互期间可能被涂成红色的链接颜色：

thisNode = nodeObject; // where nodeObject is the javascript object for the node, it's probably called "d" in your function.
d3.selectAll(".link")
  .style("stroke",function(d) {
     return d.source === thisNode || d.target === thisNode ? "red" : "#888888";
   })

【讨论】：