d3: brush changes click to mouseover

问题:

I'm trying to create a scatter plot with a combination of brush selection, tooltips and click events, but it seems that once I add a brush to an svg canvas, all click events on objects get mapped to mouseovers. Is there any way around this? Example code below and @ http://jsfiddle.net/7j8cr/

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>

var my_circles = [{"x": 40, "y": 100, "r": 12},
              {"x": 100, "y": 40, "r": 8}],
    width = 400,
    height = 400,
    svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

function click(d) { console.log("Clicky Clicky!") };
function mouseover(d) { console.log("I saw  mouse!") }

var brush = d3.svg.brush()
    .x(d3.scale.identity().domain([0, width]))
    .y(d3.scale.identity().domain([0, height]))

svg.call(brush);

svg.selectAll("dataObj")
    .data(my_circles)
    .enter().append("circle")
        .attr("r", function(d) { return d.r })
        .attr("cx", function(d) { return d.x })
        .attr("cy", function(d) { return d.y })
        .style("fill", "blue")
        .on("mouseover", mouseover)
        .on("click", click); 

</script>

Clicking on the circles triggers mouseover(), and you can get the same action to trigger the correct event by commenting out the line

svg.call(brush);

But then obviously you loose the brush.... is there a way to get all 3 acting correctly?

回答1:

The click events are not getting translated to mousover, they are simply not happening -- the mouseover event you see is when you move the cursor over the circle to click it. The problem has an easy solution however -- all you need to do is set pointer-events to all on the circles.

Complete example here.