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

<强> EDITS

抱歉，我错过了关于通过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);

在D3 Bubble Layout中，有没有办法收听泡泡的名称并通过jQuery添加交互？

1 个答案: