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

我刚刚开始在我的Web应用程序中使用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));
});

提前感谢您的帮助，

---

Dani

那么您只想获取边缘连接到的节点？这将有助于：

//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匹配的节点。如果以另一种方式链接，只需更改筛选器：）

小提琴演奏：

我已仿制了一把小提琴作为例子。我用鼠标盖代替了点击。我需要用名字来代替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)
  })

---

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

所以您只想获取边缘连接到的节点？这将有助于：

//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匹配的节点。如果以另一种方式链接，只需更改筛选器：）

小提琴演奏：

我已仿制了一把小提琴作为例子。我用鼠标盖代替了点击。我需要用名字来代替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)
  })

---

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

您可以使用此JSON共享一个示例代码段吗？您可以使用此JSON共享一个示例代码段吗？谢谢，我在问题中提出了解决方案。我甚至从来没有使用过javascript（只有python和java）的经验，我尝试在几小时内学习d3。我在网上找不到答案可能是因为答案很简单：）@Dani首先，你真的不应该在答案中加入答案，所以如果没有人提供正确的答案，你应该添加自己的答案。但是既然我解决了这个问题，你应该选择它作为正确的答案，因为它似乎对你有帮助。另外，您的答案不完整。“clickonEdgeEvent”函数的作用是什么？谢谢，我在问题中给出了解决方案。我甚至从来没有使用过javascript（只有python和java）的经验，我尝试在几小时内学习d3。我在网上找不到答案可能是因为答案很简单：）@Dani首先，你真的不应该在答案中加入答案，所以如果没有人提供正确的答案，你应该添加自己的答案。但是既然我解决了这个问题，你应该选择它作为正确的答案，因为它似乎对你有帮助。另外，您的答案不完整。“clickonEdgeEvent”函数的作用是什么？