D3 v4刷和缩放相同的元素(没有鼠标事件冲突)
我的目标是构建一个D3 (v4)图表，它同时使用D3变焦和D3-刷，如下所示：
- 当鼠标位于x轴上时，用户可以缩放(用鼠标轮)或平移(通过向左和右拖动)。
- 当鼠标位于y轴上时，用户可以缩放(用鼠标轮)或平移(通过上下拖动)。
- 当鼠标定位在图表主体上时，用户可以缩放(用鼠标轮)或刷子将x域设置为特定范围。
我成功地在适当的轴上实现了缩放和平移(根据需求1和2)，但是在将两者结合在一起以实现需求3方面存在问题。
根据文档/示例，我做了以下工作：
- 对于刷牙，追加一个
gSVG元素并对该元素调用brush。库创建一个rect，其中包含类overlay，并附加适当的鼠标事件，让我在该空间中绘制一个画笔区域。 - 为了缩放，添加一个
rectSVG元素并对该元素调用zoom。这个库可以勾起适当的鼠标事件，这样我就可以在这个空间内用鼠标轮上下滚动。
我遇到的问题是这两种方法的结合。因为zoom 和 brush 都创建了一个 rect 并处理鼠标事件，所以一次只能运行一个。最后创建的SVG元素“窃取”鼠标输入，而不将其传播到另一个输入。我怎样才能让这两个人在主图表区域很好地合作呢？
我有一个例子项目，它显示了问题。它基于角& TypeScript，但可以按以下方式运行：
- 在https://github.com/mattwilson1024/d3-zoom-and-brush上查看我的示例
- 运行应用程序，运行
npm install或yarn install，然后运行npm start或yarn start - 开放
http://localhost:4200 - 你可以在两个轴上缩放和平移，或者刷主图表区域。可缩放区域颜色为绿色和红色，以帮助调试。
- 打开/src/app/char/chart.component.ts并取消第196行注释。这移动x轴“缩放区域”(rect)来覆盖整个图表。这意味着你可以使用轮子缩放-x与鼠标在图表上的任何地方。
- 问题是现在缩放区域从画笔上“偷”了鼠标事件，所以刷牙已经不可能了，取而代之的是平移。与
d3-zoom设置的摇摄行为不同，我希望能够通过拖动鼠标来进行画笔，但仍然可以按轮缩放。
回答 3
Stack Overflow用户
发布于 2017-10-11 18:39:49
我今天也遇到了同样的问题。正如您所指出的，缩放和画笔行为相互窃取事件，因此您必须在不同的元素上建立它们。
本文很好地概述了如何做到这一点：http://blog.scottlogic.com/2014/09/19/d3-svg-chart-performance.html
本质上，这相当于创建一个SVG来专门处理缩放事件。您可以将您的画笔行为附加到svg组。
还请参阅这里的演示：http://tlsim.github.io/sl-blog-d3/ohlcSemanticZoom.html
Stack Overflow用户
发布于 2020-01-15 17:19:13
这个问题是由d3.缩放(来源)导致的，它为mousedown事件添加了一个事件侦听器mousedowned。mousedowned调用event.stopImmediatePropagation，从而阻止其他mousedown侦听器(在您的例子中是brush)侦听。由于不希望对图表正文进行摇摄，所以可以删除此侦听器。
chartbody.on("mousedown.zoom", null)这将阻止zoom监听mousedown并停止事件传播。
Stack Overflow用户
发布于 2020-01-15 18:09:14
当我也在面对这个挑战的时候，我终于找到了一个有效的解决方案。缩放合并了event.stopPropagation()。这意味着在包含在父元素中的元素上触发的任何事件都不会“冒泡”到父元素。请参阅MDN以了解冒泡及其工作原理，并给出一个很好的示例俘获。
这就是我如何理解它的工作原理，以及我如何合理地让我的解决方案发挥作用:对于刷牙，事件将传播到祖先元素。在您的情况下，可以使用svg元素。在您的情况下，您已经在svg中附加了一个rect元素，并将您的缩放行为附加到rect。因此，缩放的元素不是带画笔的元素的父元素，而是“叔父/姑妈”，就好像您直接遍历DOM树一样，您将返回svg，而不是rect。
如果将缩放行为附加到svg，以便它是带有画笔操作的group元素的祖先，这将允许g元素上的操作冒泡到svg。现在，您的变焦也可以启动，因为事件将泡沫化。在本例中，只需合并一个检查，以查看事件的来源，即是画笔或缩放操作。根据检查结果，然后可以应用缩放，当且仅当，缩放操作是触发缩放事件的原因，否则应用刷牙方法。
https://stackoverflow.com/questions/46649926
复制相似问题
腾讯云开发者
