D3 v4 Brush 和 Zoom 在同一个元素上（没有鼠标事件冲突）

Question

我的目标是构建一个同时使用d3-zoom和d3-brush的 D3 (v4) 图表，如下所示：

1. 当鼠标位于 x 轴上时，用户可以缩放（使用鼠标滚轮）或平移（通过左右拖动）
2. 当鼠标位于 y 轴上方时，用户可以缩放（使用鼠标滚轮）或平移（通过上下拖动）
3. 当鼠标位于图表主体上时，用户可以缩放（使用鼠标滚轮）或刷来将 x 域设置为特定范围

我已经设法在适当的轴上实现了缩放和平移（根据要求 1 和 2），但是在将两者结合在一起以实现要求 3 时遇到了问题。

我根据文档/示例完成了以下操作：

• 对于刷亮，附加一个gSVG 元素并brush在该元素上调用。该库在其中创建了一个rectwith 类overlay，并附加了适当的鼠标事件以让我在该空间内绘制一个画笔区域。

• 对于缩放，附加一个rectSVG 元素并zoom在该元素上调用。该库连接了适当的鼠标事件，以允许我在该空间内使用鼠标滚轮上下滚动。

我的问题在于这两种方法的结合。因为这两个zoom和brush创建rect和处理鼠标事件，在同一时间只有一个作品。最后创建的 SVG 元素“窃取”了鼠标输入，并且不会将其传播给另一个。我怎样才能让两者在主图表区域很好地一起玩？

我有一个显示问题的示例项目。它基于 Angular 和 TypeScript，但可以按如下方式运行：

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 轴“缩放区域”（矩形）以覆盖整个图表主体。这意味着您可以使用滚轮在图表上的任何位置使用鼠标缩放 x。
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