D3.JS получить ссылку на связанные данные щелкнули объект

Question

Я новичок в яваскрипт и D3.js

Я работаю с Force Directed Graph Примером на https://gist.github.com/4062045

мне нужно получить ссылку на связанные данные элемента clicked circle, чтобы я мог добавить ссылку на него.

У меня есть следующие строки кода в обработчик щелчка на окружности:

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

Я могу напечатать объект на консоли, но я не могу понять, как получить ссылку на этот объект, так что Я могу направить его на объект ссылки, например:

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

Цените свою помощь, ребята! Выбор

Answer 1

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

#. на (typenames [, слушатель [, захвата]])

Когда заданное событие отправляется на выбранный узел, указанный слушатель будет оцениваться для каждого выбранного элемента, передается текущий datum (d), текущий индекс (i) и текущую группу (узлы), причем это как текущий элемент DOM.

Answer 2

В пользу других новичков там, это то, как я решил эту проблему:

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

Вот мое решение:

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

Идея заключается в том, на trigering из данное событие, вы просмотрите список ссылок и выделите (добавьте класс) каждому, чей источник или цель соответствует индексу, найденному в данных данного узла. Вероятно, он не делает все, что может сделать d3, но для него не требуются дополнительные библиотеки, и я быстро выделяю ссылки на исходные/целевые ссылки.