javascript - d3 ズームとブラシが同時に動作する

Question

ズームとブラシの動作を同時に処理する方法を知りたいです。

「領域の選択」オプションを有効にするかどうかを制御するアプリケーションがあるとします。アクティブ化されている場合、ユーザーが視覚的に選択を開始すると、一連の SVG 要素をブラッシングすることが期待されます。非アクティブ化されている場合、ユーザーは SVG コンテナー (パン) を移動します。

互いにオーバーライドせずに、状態を使用して適切に動作するように、両方のネイティブ d3 動作を宣言するにはどうすればよいですか? または、ユーザーが別の動作を望んでいるときに、イベントを破棄して新しいイベントを宣言する必要がある唯一の解決策ですか?

または、それを行う別の別の方法はありますか？

私が持っているコードは次のとおりです。

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) }));

d3.behaviour.zoom を処理し、互いにオーバーライドせずにブラッシングするにはどうすればよいですか?

よろしくお願いします。