2

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?

Kevin Hill
  • 473
  • 5
  • 16
  • This [gist](http://bl.ocks.org/musically-ut/4747894) looks helpful, and so does this [blog post](http://wrobstory.github.io/2013/11/D3-brush-and-tooltip.html). The gist is mentioned by its author in this [SO answer](http://stackoverflow.com/questions/14697495/fine-grained-event-handling-with-d3-brushes). – FernOfTheAndes May 07 '14 at 20:41
  • Cool gist. That will probably help me tackle any remaining issues I have. Thanks! – Kevin Hill May 07 '14 at 23:15

1 Answers1

3

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.

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
  • Awesome thanks! That totally works, however, there is certainly some mapping or something going on. In the origional version, clicks do cause the mouseover function to fire, and can continue to do so as many times as you click. Try it yourself. Now maybe it is the mouse disappearing and the reappearing or the events getting mapped? But it certainly happens, and doesn't happen when there is no brush, or pointer-events are set to all. – Kevin Hill May 07 '14 at 23:10
  • Doesn't happen here (I've tried several times) with Chrome. – Lars Kotthoff May 08 '14 at 08:10
  • huh, happened both on my work Mac with Chrome and my home PC with Firefox... Oh well, problem solved regardless. Edit: just for useless detail. Nothing is fired on the first click, but all subsequent clicks spawn mouseover events. Truly bizarre. – Kevin Hill May 08 '14 at 13:14
  • The example fiddle brush behaves strangely. Starting the brush on the background selects normally but starting the brush by clicking on one of the circles results in the brush selection area being translated away from the mouse pointer. Thoughts? – tribalvibes May 13 '14 at 06:12
  • 1
    When the circles received pointer events, you're not supposed to start the brush there as it will result in things like you've mentioned. – Lars Kotthoff May 13 '14 at 08:30