Question

我是javascript和D3.js的新手

我正在https://gist.github.com/4062045

处使用Force Directed Graph示例

我需要获得对点击的圆元素的绑定数据的引用，以便我可以添加一个链接。

我在圈子的点击处理程序中有以下代码行：

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
});

# 选择。 on （ typenames [， listener [， capture） ]]）

当在选定节点上调度指定事件时，将为每个选定元素计算指定的侦听器，传递当前数据（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");
    }
  }
});

这个想法是，在给定事件的分支上，您将浏览链接列表，并突出显示（添加一个类）每个源的源或目标与给定节点的数据中找到的索引匹配。它可能没有做任何d3能够做的事情，但它不需要额外的库，我正在快速突出我的源/目标链接。

D3.JS获取对被点击对象的绑定数据的引用

3 个答案: