[英]Separate mouse clicks for circles and background in D3 circle pack
How do I get two separate click events from my code below 我如何从下面的代码中获得两个单独的点击事件
1."Circle Click" will be displayed when I click in a circle. 1.当我单击一个圆圈时,将显示“ Circle Click”。
2.Then immediately after the "Back ground clicked" alert is displayed. 2.然后,在显示“单击背景”警报之后立即显示。
What I require is to have both events independent of each other, so the "Circle Click" will alert when I click in a circle and "Back ground clicked" will ONLY alert when I click on the background ie the chart container. 我需要的是使两个事件彼此独立,因此当我单击一个圆圈时,“ Circle Click”将发出警报,而当我单击背景(即图表容器)时,“ Background 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>
Remove the onclick event from the vis object and add it to a background rectangle: 从vis对象中删除onclick事件,并将其添加到背景矩形中:
var background = vis.append("rect")
.attr("width", r)
.attr("height", r)
.on("click", function (d) { alert("Background clicked"); });
Make sure that you add the background rectangle before the circles so that they appear in front of it. 确保在圆圈之前添加背景矩形,以便它们出现在圆圈的前面。
Working jsfiddle: http://jsfiddle.net/HKE2j/ 可用的jsfiddle: http : //jsfiddle.net/HKE2j/
I think its that: 我认为是这样的:
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");
});
我认为event.stopPropagation()在这里会有所帮助:api.jquery.com/event.stopPropagation
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.