こんにちは。
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>