D3.JS uzyskać odniesienie do danych związanych klikniętego obiektu

Question

Jestem newbie do javascript i D3.js

pracuję z siłą graf skierowany przykładu w https://gist.github.com/4062045

muszę się odniesienie do powiązane dane klikniętego elementu koła, dzięki czemu mogę dodać do niego link.

Mam następujący wiersz kodu w click obsługi w okręgu:

d3.select(this).each(function(d){console.log(d)}); 

jestem w stanie wydrukować obiekt pocieszyć, ale nie mogę dowiedzieć się, jak uzyskać referencję do tego obiektu, tak aby mogę ją wepchnąć obiektu łącza jak:

{source: <reference to node should go here>, target: some_other_node} 

wdzięczni za pomoc chłopaki!

Answer 1

circles.on('click', datum => { 
    console.log(datum); // the datum for the clicked circle 
}); 

#wybór. na (typenames [, słuchacz [, wychwytywania]])

Kiedy określone zdarzenie wywoływane jest od wybranego węzła określony słuchacz będzie ocenione dla każdego wybranego elementu przepuszcza aktualny punkt odniesienia (d), bieżący indeks (i) i aktualna grupa (węzły), z tym jako bieżącym elementem DOM.

Answer 2

Z korzyścią dla innych początkujących tam, to w jaki sposób rozwiązać ten:

//Register the event handler with you selection 
myselection.on("click", click); 

//Obtain reference to data of currently clicked element by obtaining the first argument of  the event handler function 

function click(element){ 
    console.log(element); 
} 

Answer 3

Oto moje rozwiązanie:

/* CSS used in Javascript snippet */ 
.source { 
    stroke-width: 3px !important; 
    stroke-opacity: 1; 
    stroke: #0f0; 
} 

.target { 
    stroke-width: 3px !important; 
    stroke-opacity: 1; 
    stroke: #f00; 
} 


// this goes inside the d3.json call 
node.on("mouseover", function() { 
    idx = this.__data__.index 
    for (i = 0; i < graph.links.length; i++) { 
    if (graph.links[i].source.index == idx) { 
     link[0][i].classList.add("source"); 
    } 
    else if (graph.links[i].target.index == idx) { 
     link[0][i].classList.add("target"); 
    } 
    else { 
     link[0][i].classList.remove("source"); 
     link[0][i].classList.remove("target"); 
    } 
    } 
}); 

Pomysł polega na trigering Urządzony dane zdarzenie, przejrzysz listę łączy i podświetlisz (dodasz klasę) do każdego, którego źródło lub cel pasuje do indeksu znalezionego w danych danego węzła. Prawdopodobnie nie robi wszystkiego, co robi d3, ale nie wymaga dodatkowych bibliotek i szybko dostaję swoje linki źródłowe/docelowe.