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

Я новичок в javascript и D3.js

Я работаю с примером графика, приведенным в Force, на 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}

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

Ответы

Ответ 1

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

# на (typenames [, listener [, capture]])

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

Ответ 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); 
}

Ответ 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");
    }
  }
});

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