I have a scatter plot that is generated using D3. Points (SVG circles) on the plot can be selected by clicking on them and regions can be selected using a D3 brush.

To ensure the circles get the click event I need to create the brush first so the circles are above it. Unfortunately this means I can't drag to create the brush extent when my cursor is over a point in the plot.

Is there a way to pass hover and click events to the circles, but handle drag related events with the brush?

I have a scatter plot that is generated using D3. Points (SVG circles) on the plot can be selected by clicking on them and regions can be selected using a D3 brush.

To ensure the circles get the click event I need to create the brush first so the circles are above it. Unfortunately this means I can't drag to create the brush extent when my cursor is over a point in the plot.

Is there a way to pass hover and click events to the circles, but handle drag related events with the brush?

• javascript
• events
• svg
• d3.js

2 Answers 2

It can be accomplished but with use of the D3 brush API (See note below).

This is an example http://bl.ocks.org/4747894 where:

1. The brush element is behind the circles
2. The circles respond to the mousedown event. (Can respond to other events as well.)
3. The brush element is well-behaved even if dragging starts from inside one of the circles.

Some tracing and a look at the D3 source code suggests that the extent is not being reset properly when a mousemove event is fired from a circle element atop the brush. That can be fixed by resetting the extent for the brush in the mousedown listener for the circle elements:

        circles.on("mousedown", function (d, i) {
            // _svg_ is the node on which the brush has been created
            // x is the x-scale, y is the y-scale
            var xy = d3.mouse(svg.node()),
                xInv = x.invert(xy[0]),
                yInv = y.invert(xy[1]);

            // Reset brush's extent
            brush.extent([[xInv, yInv], [xInv, yInv]]);

            // Do other stuff which we wanted to do in this listener
        });

Note: As per the API, the brush's selection will not be refreshed automatically on calling .extent(values). Merely clicking on a circle will reset the extent but will not redraw the selection made. The selection will be discarded only when a different selection is started inside the circle, or by clicking outside the circles and the current selection. This is the desired behavior, as I understand from the question. However, this might break code which is written with the assumption that whatever is the extent of the brush would be the selection visible on the graph.

Use selection.on: http://jsfiddle.net/NH6zD/1

var target,
    dimensions = {width: 200, height: 200},
    svg = d3.select("body").append("svg").attr(dimensions),
    rect = svg.append("rect").attr(dimensions); // Must be beneath circles 
svg
  .on("mousedown", function() {
      target = d3.event.target || d3.event.srcElement;
      if ( target === rect.node() ) {
          /* Brush */
      } else {
          /* Circle */
      }
  })
  .on("mousemove", function() {
      if (!target) return;
      if ( target === svg.rect() ) {
          /* Brush */
      } else {
          var mouse = d3.mouse(svg.node());
          target.attr({x: mouse[0], y: mouse[1]});
      }
  });
(function(exit) {
    for (var i in exit) svg.on(exit[i], function() { target = undefined; });
})(["mouseout", "mouseup"]);