D3 V4刷和缩放同一元件上（无鼠标事件冲突的）

Question

我的目标是构建一个使用两个d3-zoom和d3-brush在一起的D3（V4）图表，如下所示：

1. 当鼠标（用鼠标滚轮）或平移（通过左右拖动）
2. 当鼠标位于y轴上时，用户可以放大（用鼠标滚轮）或平移（通过向上和向下拖动）
3. 当鼠标位于统计图主体上方时，用户可以放大（用鼠标滚轮）或画笔来设置x域在特定范围

我已成功地同时实现变焦和相应的轴线平移（根据要求1 & 2），但我有组合两个在一起，以实现要求3

问题我已经做了以下的基础上，文档/例子：

• 进行涂刷，追加g SVG元素和调用元素的brush。该库创建一个rect与overlay里面，并附加适当的鼠标事件，让我画这个空间内的画笔区域。

• 对于缩放，请附加一个rect SVG元素并在该元素上调用zoom。图书馆连接适当的鼠标事件，让我用鼠标滚轮在该空间内上下滚动。

我遇到的问题是这两种方法的结合。因为zoom和brush都创建了rect并处理鼠标事件，所以一次只能使用一个。最后创建的SVG元素“窃取”鼠标输入并不会将其传播到另一个。我怎样才能让这两人在主图表区域一起很好地玩耍？

我有一个示例项目，显示问题。它是基于角&打字稿，但可以运行如下：

1. 结帐我的例子在https://github.com/mattwilson1024/d3-zoom-and-brush
2. 运行应用程序运行npm install或yarn install，然后npm start或yarn start
3. 打开http://localhost:4200
4. 你可以放大&在两个轴上平移，或刷出主图表区域。可缩放区域为绿色和红色，以帮助调试
5. 打开/src/app/char/chart.component.ts并取消注释行196.这将移动x轴“缩放区域”（rect）以覆盖整个身体的图表。这意味着您可以使用滚轮在图表上的任意位置使用鼠标进行缩放。
6. 问题是，现在缩放区域从画笔“窃取”鼠标事件，因此刷牙不再可能，而是平移。我希望能够通过拖动鼠标进行刷动，但仍然可以使用滚轮进行缩放，而不是使用d3-zoom设置的平移行为。

Answer 1

我今天遇到了同样的问题。正如你指出的那样，变焦和刷行为窃取海誓山盟的事件，所以你必须建立它们放在不同的元素。

这篇文章有如何做一个很好的概括： http://blog.scottlogic.com/2014/09/19/d3-svg-chart-performance.html

本质上，它相当于创建一个SVG矩形来专门处理变焦的事件。您可以将您的笔刷行为附加到svg组。

在此还看到了演示： http://tlsim.github.io/sl-blog-d3/ohlcSemanticZoom.html