javascript D3.JS 获取被点击对象绑定数据的引用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14786373/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
D3.JS get reference to bound data of clicked object
提问by smartexpert
I am a newbie to javascript and D3.js
我是 javascript 和 D3.js 的新手
I am working with the Force Directed Graph Example at https://gist.github.com/4062045
我正在使用https://gist.github.com/4062045上的 Force Directed Graph Example
I need to get a reference to the bound data of the clicked circle element so that I can add a link to it.
我需要获得对被点击的圆元素的绑定数据的引用，以便我可以添加一个链接到它。
I have the following line of code in the circle's click handler:
我在圆圈的点击处理程序中有以下代码行：
d3.select(this).each(function(d){console.log(d)});
I am able to print the object to console but I can't figure out how to get a reference to this object so that I can push it into a link object like:
我能够将对象打印到控制台，但我无法弄清楚如何获取对此对象的引用，以便我可以将其推送到链接对象中，例如：
{source: <reference to node should go here>, target: some_other_node}
Appreciate your help guys!
感谢您的帮助！
采纳答案by Wex
circles.on('click', datum => {
console.log(datum); // the datum for the clicked circle
});
#selection.on(typenames[, listener[, capture]])
#选择。on( typenames[, listener[, capture]])
When a specified event is dispatched on a selected node, the specified listener will be evaluated for each selected element, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element.
当在选定节点上调度指定事件时，将为每个选定元素评估指定的侦听器，传递当前数据 (d)、当前索引 (i) 和当前组 (节点)，以此作为当前 DOM 元素。
回答by smartexpert
For the benefit of other newbies out there, this is how I solved this:
为了其他新手的利益，我是这样解决这个问题的：
//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);
}
回答by Laboratory Mike
Here is my solution:
这是我的解决方案：
/* 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");
}
}
});
The idea is, on the trigering of a given event, you will look through the list of links, and highlight (add a class) to each one whose source or target matches the index found in a given node's data . It likely isn't doing everything d3 is capable of doing, but it doesn't require extra libraries and I'm getting fast highlighting of my source/target links.
这个想法是，在触发给定事件时，您将查看链接列表，并突出显示（添加一个类）到源或目标与给定节点数据中找到的索引匹配的每个链接。它可能没有完成 d3 能够做的所有事情，但它不需要额外的库，而且我正在快速突出显示我的源/目标链接。
