d3.js ottengono riferimento ai dati associati di oggetto cliccato

Question

Sono un novizio di javascript e d3.js

sto lavorando con la forza diretta grafico Esempio a https://gist.github.com/4062045

ho bisogno di ottenere un riferimento alla i dati associati dell'elemento cerchio cliccato in modo da poter aggiungere un collegamento ad esso.

ho la seguente riga di codice nel gestore Click del cerchio:

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

sono in grado di stampare l'oggetto di consolarla, ma io non riesco a capire come ottenere un riferimento a questo oggetto in modo che Posso inserirlo in un oggetto di collegamento come:

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

Apprezzo il tuo aiuto ragazzi!

Answer 1

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

#selezione. su (nomi dei tipi [, ascoltatore [, cattura]])

Quando un evento specificato viene inviato su un nodo selezionato, l'ascoltatore specificato saranno valutati per ciascun elemento selezionato, vengono passati il dato corrente (d), l'indice corrente (i) e il gruppo corrente (nodi), con questo come l'attuale elemento DOM.

Answer 2

A beneficio di altri newbies là fuori, questo è come ho risolto in questo modo:

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

Ecco la mia soluzione:

/* 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"); 
    } 
    } 
}); 

L'idea è, sulla trigering di un dato l'evento, si guarderà attraverso l'elenco dei collegamenti e si evidenzierà (aggiungere una classe) a ciascuno la cui fonte o destinazione corrisponde all'indice trovato nei dati di un dato nodo. Probabilmente non sta facendo tutto ciò che d3 è in grado di fare, ma non richiede librerie aggiuntive e sto ottenendo rapidamente l'evidenziazione dei miei link di origine/destinazione.