javascript - 在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

如果您希望鼠标悬停仅作用于最低级别的子级，请按类别定位它们:

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