1

以下のコードから 2 つの個別のクリック イベントを取得するにはどうすればよいですか

1.円をクリックすると「Circle Click」と表示されます。

2.その後、「背景がクリックされました」というアラートが表示された直後。

私が必要とするのは、両方のイベントを互いに独立させることです。そのため、「サークルクリック」は円をクリックしたときにアラートを出し、「バックグラウンドクリック」は背景、つまりチャートコンテナをクリックしたときにのみアラートを出します。

 <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>
4

3 に答える 3

1

vis オブジェクトから onclick イベントを削除し、背景の四角形に追加します。

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

円が前に表示されるように、円の前に背景の四角形を必ず追加してください。

jsfiddle の作業: http://jsfiddle.net/HKE2j/

于 2013-05-29T16:27:40.480 に答える
0

私は event.stopPropagation() がここで役立つと考えています: api.jquery.com/event.stopPropagation

于 2013-05-29T16:29:53.390 に答える
0

私はそれだと思います：

 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");
 });
于 2013-05-29T16:26:00.650 に答える