在D3气泡布局中，有没有办法通过jQuery监听气泡的名称并添加交互？

Question

我正在构建一个像这样的D3可缩放圆形填充气泡布局：http://bl.ocks.org/mbostock/7607535

我得到了json的概念，并设法使用了我自己的json数据。但是，我想通过jQuery为气泡添加交互性。

大致是这样的：

$(IdOfCurrentBubble).mouseover(function({
    play sound (iDOfCurrentBubble.mp3);
    doStuff;
    doOtherStuff;
});

Answer 1

为什么选择jquery？使用d3添加事件处理程序：

var circle = svg.selectAll("circle")
  .data(nodes)
  .enter().append("circle")
  .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
  .style("fill", function(d) { return d.children ? color(d.depth) : null; })
  .on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); })
  .on("mouseover", function(d){ //<--here's your mouseover
    console.log(d.name);
  });

编辑

对不起，我错过了通过ID应用函数的部分。

var circle = svg.selectAll("circle")
  .data(nodes)
  .enter().append("circle")
  .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
  .style("fill", function(d) { return d.children ? color(d.depth) : null; })
  .on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); })

d3.select("#IdOfCurrentBubble")
  .on("mouseover", someFunc);

function someFunc(){
  var myId = d3.select(this).attr('id');
  // use myId here
}

编辑2个

如果您希望mouseover仅在最低级别的子级上，请按类确定它们的目标：

d3.selectAll(".node--leaf")
  .on("mouseover", someFunc);