こんにちは。
d3.js で svg の DOMイベント伝播を止める動作例（下記）を見つけたので、動かしてみました。緑色の円の方は circle だけがマウスクリックイベントを受け取り、svg には届かないことが右側に表示されます。
- "stopPropagation" (Jason Davies’s Block)
d3_stopPropagation.html
<!DOCTYPE html>
<style>circle {stroke: #000;}</style>
<body bgcolor="#eee">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var svg = d3.select("body").append("svg")
.style("float", "left")
.attr("width", 480)
.attr("height", 480)
.on("click", log("click svg"));
svg.append("circle")
.style("fill", "lightgreen")
.attr("cx", 200)
.attr("cy", 80)
.attr("r", 60)
.on("click", function() { d3.event.stopPropagation(); })
.on("click.foo", log("click circle")) // namespacing for events
svg.append("circle")
.style("fill", "lightblue")
.attr("cx", 200)
.attr("cy", 240)
.attr("r", 60)
.on("click.foo", log("click circle"))
var divlog = d3.select("body").append("div")
.style("float", "left")
function log(message) {
return function() {
divlog.append("p")
.text(message)
.style("background", "#ff0")
.transition()
.duration(2500)
.style("opacity", 1e-6)
.remove();
};
}
</script>