D3 zoom and brush work simultaneously

Question

I would like to know how I can work with Zoom and Brush modes at the same time.

Imagine that you have an application that monitors whether the "Select Area" option is activated or not. If it is activated, then when the user starts to select visually, he must clean the set of SVG elements. If deactivated, the user will move some kind of SVG container (pan).

How can I declare as my own d3 behavior without overriding between myself and working correctly using state? Or is this the only solution I have to destroy with events and announce new ones and vice versa when the user wants a different behavior?

Or is there any other way to do this?

The piece of code that I have is the following:

var zoomer, brush; zoomer = self.get('zoomer'); if (zoomer === undefined){ self.set({zoomer: d3.behavior.zoom().translate([0,0]).scale(1)}); } else{ self.zoomCurrent(); } brush = self.get('brush'); if (brush === undefined) { self.set({brush: d3.svg.brush().x(d3.scale.identity().domain([0, self.get('config').width])) .y(d3.scale.identity().domain([0, self.get('config').height]))}); } svgObject = d3.select(self.get('target')).append('svg') .attr('xmlns', 'http://www.w3.org/2000/svg') .attr('xlink', 'http://www.w3.org/1999/xlink') .attr('id', self.get('targetNoChar')+'SVG') .attr('width',self.get('config').width) .attr('height',self.get('config').height) .attr("pointer-events", "all") .call(self.get('zoomer').on("zoom", function (d) { self.zoomFunction(d3.event, this,d) })) .append('g') .attr('class', 'zoomer') .attr("pointer-events", "all") .append('g') .attr("pointer-events", "all"); d3.select('svg').append('g') .attr('class', 'brush') .attr("pointer-events", "all") .datum(function() { return { selected: false, previouslySelected: false};}) .call(self.get('brush').on('brushstart', function (d) { self.brushStart(d3.event, this,d) }) .on('brush', function (d) { self.brush(d3.event, this,d) }) .on('brushend', function (d) { self.brushEnd(d3.event, this,d) })); 

How can I deal with d3.behaviour.zoom as well as a brush without overriding each other?

Thank you very much in advance.

Answer 1

BEGINNING OF THE FIRST DECISION:

Finally, my decision was to re-declare the event definition when the state changed, resulting in the following code:

 setAreaMode: function () { var self = this; if (self.get('selectAreaMode')===true) { self.setCursorToCrosshair(); /* Deactivating zoom tool */ self.get('zoomer').on('zoom', null); /* Adding brush to DOM */ d3.select('svg').append('g') .attr('class', 'brush') .attr("pointer-events", "all") .datum(function() { return { selected: false, previouslySelected: false};}); /* Attaching listeners to brush */ d3.select('.brush').call(self.get('brush').on('brushstart', function (d) { self.brushStart(d3.event, this,d) }) .on('brush', function (d) { self.brush(d3.event, this,d) }) .on('brushend', function (d) { self.brushEnd(d3.event, this,d) }) ); } else if (self.get('selectAreaMode')===false) { self.setCursorToDefault(); /* Activating zoomer */ self.get('zoomer').on('zoom', function (d) { self.zoomFunction(d3.event, this,d) }); /* Deactivating listeners brush tool */ d3.select('.brush').call(self.get('brush').on('brushstart', null) .on('brush', null) .on('brushend', null)); /* Removing brush from DOM */ d3.select('.brush').remove(); } } 

Any other ideas?