獨立的鼠標點擊在D3圈包

Question

如何圓圈和背景我從下面

1.「圈子，點擊」我的代碼，兩個獨立的點擊事件，當我轉了一圈點擊會顯示出來。

2.然後顯示「Back ground clicked」提示後立即顯示。

我需要的是讓兩個事件彼此獨立，所以當我點擊一個圓圈時，「圓形點擊」將會發出警報 和「單擊後臺」只會在我點擊背景即圖表時發出警報容器。

<script> 
      $(document).ready(function() { 
       var json = { 
        "name": "flare", 
        "children": [ 
         { "name": "<div>test1<br>test again</div>", "size": 20, "color": "#ff0000" , "id": 1}, 
         { "name": "test2", "size": 40, "color": "#ffff00", "id": 2}, 
         { "name": "test3", "size": 60, "color": "#ff0000", "id": 3}, 
         { "name": "test4", "size": 80, "color": "#ff00ff", "id": 4 }, 
         { "name": "test5", "size": 100, "color": "#0000ff", "id": 5} 
        ] 
       }; 

       var r = 400, 
        format = d3.format(",d"), 
        fill = d3.scale.category20c(); 

       var bubble = d3.layout.pack() 
        .sort(null) 
        .size([r, r]) 

        .padding(1.5); 

       var vis = d3.select("#chart").append("svg") 
        .attr("width", r) 
        .attr("height", r) 
        .attr("class", "bubble") 
        .on("click", function (d) { alert("Back ground clicked"); }); 

       var node = vis.selectAll("g.node") 
        .data(bubble.nodes(classes(json)) 
        .filter(function (d) { return !d.children; })) 
        .enter().append("g") 
        .attr("class", "node") 
        .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; }); 


       node.append("circle") 
        .attr("r", function (d) { return d.r; }) 
        .style("fill", function (d) { return d.color; }) 
        .on("click", function (d) { alert("Circle Clicked"); }); 

       node.append("text") 
        .attr("text-anchor", "middle") 
        .attr("dy", "0.3em") 
        .text(function (d) { return d.dispText.substring(0, d.r/3); }); 



       function classes(root) { 
        var classes = []; 

        function recurse(name, node) { 
         if (node.children) 
          node.children.forEach(function (child) { 
           recurse(node.name, child); 
          }); 
         else 
          classes.push({ 
           packageName: name, dispText: node.name, value: node.size, color: node.color, id: node.id}); 
        } 

        recurse(null, root); 
        return { children: classes }; 
       } 

      }); 

     </script> 

Answer 1

我認爲它是：

node.append("circle") 
    .attr("r", function (d) { 
    return d.r; 
}) 
    .style("fill", function (d) { 
    return d.color; 
}) 
    .on("click", function (d) { 
    d.stopPropagation(); 
    alert("Circle Clicked"); 
}); 

Answer 2

取下可見對象onclick事件並將其添加到一個矩形背景：

var background = vis.append("rect") 
        .attr("width", r) 
        .attr("height", r) 
        .on("click", function (d) { alert("Background clicked"); }); 

請確保您添加矩形背景在圈子之前，讓它們出現在它的前面。

工作的jsfiddle：http://jsfiddle.net/HKE2j/

Answer 3

即時通訊思想event.stopPropagation（）將在這裏幫助：api.jquery.com/event.stopPropagation