gpt4 book ai didi

d3.js - D3 v4在同一元素上进行画笔和缩放(没有鼠标事件冲突)

转载 作者:行者123 更新时间:2023-12-03 16:28:18 27 4
gpt4 key购买 nike

我的目标是建立一个同时使用d3-zoomd3-brush的D3(v4)图表,如下所示:

  • 当鼠标位于x轴上时,用户可以缩放(使用鼠标滚轮)或平移(通过左右拖动)
  • 当鼠标位于y轴上时,用户可以缩放(使用鼠标滚轮)或平移(通过上下拖动)
  • 当鼠标位于统计图主体上方时,用户可以缩放(使用鼠标滚轮)或笔刷将x域设置为特定范围

  • 我已经设法在适当的轴上实现了缩放和平移(按照要求1和2),但是在将两者结合在一起以达到要求3时遇到了问题。

    基于docs/examples,我已经完成了以下工作:
  • 要进行刷牙,请附加g SVG元素,然后在该元素上调用brush。该库在其中创建一个带有rect类的overlay,并附加适当的鼠标事件以允许我在该空间内绘制画笔区域。
  • 要进行缩放,请附加一个rect SVG元素,然后在该元素上调用zoom。该库连接了适当的鼠标事件,以使我可以在该空间内使用鼠标滚轮上下滚动。

  • 我遇到的问题是这两种方法的结合。因为zoombrush都创建了rect并处理鼠标事件,所以一次只能工作一次。最后创建的SVG元素会“窃取”鼠标输入,并且不会将其传播到其他输入。我怎样才能使两者在主图表区域完美地融合在一起?

    我有一个显示问题的示例项目。它基于Angular和TypeScript,但可以按以下方式运行:
  • https://github.com/mattwilson1024/d3-zoom-and-brush上检查我的示例
  • 通过运行npm installyarn install,然后运行npm startyarn start
  • 来运行应用程序
  • 打开http://localhost:4200
  • 您可以在两个轴上缩放和平移,也可以笔刷主图表区域。可缩放区域被涂成绿色和红色,以帮助调试
  • 打开/src/app/char/chart.component.ts并取消注释线196。这将移动x轴“缩放区域”(矩形)以覆盖整个图表。这意味着您可以使用滚轮在图表上的任意位置用鼠标进行x缩放。
  • 问题是现在缩放区域从画笔“窃取”了鼠标事件,因此不再可能进行画笔绘制,而是进行平移。除了希望d3-zoom设置的平移行为外,我希望能够通过拖动鼠标来进行画刷,但仍然可以使用滚轮进行缩放。
  • 最佳答案

    我今天遇到了同样的问题。正如您所指出的那样,缩放和画笔行为会窃取彼此的事件,因此您必须将它们建立在不同的元素上。

    本文对如何执行进行了很好的概述:
    http://blog.scottlogic.com/2014/09/19/d3-svg-chart-performance.html

    从本质上讲,这相当于创建一个SVG矩形以专门处理缩放事件。您可以将画笔行为附加到svg组。

    另请参见此处的演示:
    http://tlsim.github.io/sl-blog-d3/ohlcSemanticZoom.html

    关于d3.js - D3 v4在同一元素上进行画笔和缩放(没有鼠标事件冲突),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46649926/

    27 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com