D3.JS：如何获取对应链接（边）的节点

Question

我刚刚开始在我的网络应用程序中使用 D3 来可视化图表。我的边缘和节点是可点击的。双击时，节点会将用户发送到包含有关节点的信息的表。我想对边缘做同样的事情，所以点击时。我想检索该边缘的相应节点，以便我可以将该信息发送到另一个脚本。

所以从技术上讲，我想知道的是如何检索与边缘对应的节点的名称。例如。节点 A 连接到节点 B。单击边缘（链接）时如何检索该节点信息？输出应该是值 A 和 B。我已经查看了所有内容，但找不到任何相关信息。

我的边和节点信息在 JSON 文件中

d3.dataset = {
    "nodes":[
        {"name":"heart problems","group":"1"},
        {"name":"acetic acid","group":"3"},
        {"name":"alzheimers","group":"1"},
        {"name":"bipolar","group":"1"},
        {"name":"ebola","group":"1"},
        {"name":"vaccinium myrtillus","group":"2"},
        {"name":"adamantane","group":"3"},
        {"name":"fluorene","group":"3"}
    ],
    "links":[
        {"source":3,"target":1,"value":20},
        {"source":3,"target":6,"value":20},
        {"source":3,"target":7,"value":9},
        {"source":0,"target":1,"value":19},
        {"source":0,"target":6,"value":1},
        {"source":2,"target":1,"value":20},
        {"source":2,"target":6,"value":20},
        {"source":2,"target":7,"value":5},
        {"source":4,"target":1,"value":2},
        {"source":4,"target":6,"value":3},
        {"source":2,"target":5,"value":2},
        {"source":5,"target":1,"value":2}
    ]
}

解决方案，谢谢你的回答我觉得很愚蠢......我忘了在函数中使用 d :)

这是现在的函数，clickonEdgeEvent 函数将值传递到我的 HTML

var clickOnEdge =  svg.selectAll(".link").on("dblclick", function(d){
d3.select(this).attr('r', 8)
.style("fill","lightcoral")
.style("stroke","red")
clickonEdgeEvent((d.source.name),(d.target.name));
});

提前感谢您的帮助， 丹妮

Answer 1

所以你只想获取边缘连接的节点？这将起作用：

//take it you have an on click function
.on('click',function(d){
   var connectedNodes = nodes.filter(function(e){
      return e.id == d.source.id || e.id == d.target.id; //connected nodes
   })    
})

以上代码将返回与链接的源 ID 和目标 ID 匹配的节点。如果您以其他方式链接它们，只需更改过滤器:)

实现的小提琴：https://jsfiddle.net/thatOneGuy/0nv4ck58/4/

我以小提琴为例。虽然我使用了鼠标悬停而不是点击。我需要使用名称而不是 ID。只需确保在您的情况下使用唯一值进行比较。这是主要部分：

 .on('mouseover', function(d) {
    console.log(d)
    var connectedNodes = node.filter(function(e) {
        return e.name == d.source.name || e.name == d.target.name; //connected nodes
      }).style('stroke', 'red')
      .attr('r', 15)
  })
  .on('mouseout', function(d) {
    console.log(d)
    var connectedNodes = node.filter(function(e) {
        return e.name == d.source.name || e.name == d.target.name; //connected nodes
      }).style('stroke', 'white')
      .attr('r', 5)
  })

在此示例中，在鼠标悬停链接上，连接的节点将显得更大并带有红色边框。鼠标悬停恢复正常:)