Javascript 在D3 circle pack中分别单击圆圈和背景

如何从下面的代码中获取两个单独的单击事件

1.当我在圆圈中单击时，将显示“圆圈单击”

2.然后，在显示“Back ground clicked”警报后立即显示

我需要的是让两个事件彼此独立，这样当我在一个圆圈中单击时，“圆圈单击”将发出警报 “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>

$（文档）.ready（函数（）{
var json={
“名称”：“flare”，
“儿童”：[
{“name”：“test1
再次测试”，“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，
格式=d3。格式（“，d”），
fill=d3.scale.category20c（）；
var bubble=d3.layout.pack（）
.sort（空）
.尺寸（[r，r]）
.填充（1.5）；
var vis=d3.选择（“图表”）.追加（“svg”）
.attr（“宽度”，r）
.attr（“高度”，r）
.attr（“类”、“气泡”）
.在（“点击”，功能（d）{警报（“背景点击”）；}；
var node=vis.selectAll（“g.node”）
.data（bubble.nodes（类（json））
.filter（函数（d）{return！d.children；}））
.enter（）.append（“g”）
.attr（“类”、“节点”）
.attr（“transform”，函数（d）{return“translate”（“+d.x+”，“+d.y+”）”）；}）；
node.append（“圆”）
.attr（“r”，函数（d）{返回d.r；}）
.style（“fill”，函数（d）{return d.color；}）
.on（“单击”，函数（d）{警报（“单击圆圈”）；}）；
node.append（“文本”）
.attr（“文本锚定”、“中间”）
.attr（“dy”，“0.3em”）
.text（函数（d）{返回d.dispText.substring（0，d.r/3）；}）；
函数类（根）{
var类=[]；
函数递归（名称、节点）{
if（节点子节点）
node.children.forEach（函数（子函数）{
递归（node.name，子节点）；
});
其他的
推({
packageName:name，dispText:node.name，value:node.size，color:node.color，id:node.id}）；
}
递归（null，root）；
返回{子类：类}；
}
});

我认为：

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

我认为：

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

---

从vis对象中删除onclick事件并将其添加到背景矩形：

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

确保在圆之前添加背景矩形，以便它们出现在圆的前面

---

工作JSFIDLE:

从vis对象中删除onclick事件并将其添加到背景矩形：

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

确保在圆之前添加背景矩形，以便它们出现在圆的前面

---

使用JSIDLE:

Im thinking event.stopPropagation（）将在此处提供帮助：api.jquery.com/event.stopPropagation

Im thinking event.stopPropagation（）将在此处提供帮助：api.jquery.com/event.stopPropagation

也许您可以发布呈现的html？Im thinking event.stopPropagation（）这里会有帮助：也许你可以发布呈现的html？我在思考事件。stopPropagation（）在这里会有帮助：