D3.JS: Wie bekomme ich Knoten der entsprechenden Verbindung (Kante)

Question

Ich habe gerade angefangen, D3 für meine Webapplikation zu verwenden, um ein Diagramm zu visualisieren. Meine Kanten und Knoten sind anklickbar. Die Knoten senden den Benutzer an eine Tabelle, die Informationen über den Knoten beim Doppelklicken enthält. Ich würde das gleiche mit den Kanten machen, also wenn man klickt. Ich möchte die entsprechenden Knoten zu dieser Kante abrufen, so dass ich diese Informationen an ein anderes Skript senden könnte.

Also technisch möchte ich wissen, wie man den Namen der Knoten, die der Kante entsprechen, abruft. Z.B. Knoten A ist mit Knoten B verbunden. Wie kann ich diese Knoteninformationen abrufen, wenn auf die Kante (Link) geklickt wird? Die Ausgabe sollte die Werte A und B sein. Ich habe alles durchgeschaut und kann dazu keine Informationen finden.

Meine Kanten und Knoteninformationen ist in einer JSON-Datei

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} 
    ] 
} 

SOLUTION, danke für die Antwort, die ich so dumm fühlen ... Ich habe vergessen, die d in der Funktion :)

zu verwenden Dies ist die Funktion nun, die clickonEdgeEvent Funktion der Werte auf meinen 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)); 
}); 

Vielen Dank im Voraus für Ihre Hilfe geht, Dani

Answer 1

Sie wollen also nur die Knoten bekommen, mit denen die Kante verbunden ist? Dies funktioniert:

//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 
    })  
}) 

Der obige Code wird Knoten zurück, die die Quell- und Ziel-IDs der Verbindung übereinstimmen. Wenn Sie ihnen eine andere Art und Weise verknüpfen, ändern Sie einfach den Filter :)

Implementiert Geige: https://jsfiddle.net/thatOneGuy/0nv4ck58/4/

Ich habe eine Geige als Beispiel verspottet. Anstatt auf Klick, habe ich Mouseover verwendet. Und statt ID musste ich Name verwenden. Stellen Sie nur sicher, dass Sie in Ihrer Situation einen eindeutigen Wert zum Vergleichen verwenden. Hier ist der Hauptteil:

In diesem Beispiel, auf Mouseover-Link werden die verbundenen Knoten größer und mit einem roten Rand angezeigt. Mouseout kehrt zum normalen Modus zurück :)