代码之家 › 专栏 › 技术社区 › papiro

为什么要使用“listener rect”来设置d3中的缩放?

svg d3.js javascript

papiro · 技术社区 · 6 年前

我得到了一个d3(v5)可视化,它由一个DOM结构组成,看起来或多或少像 svg > g > etc . 我在svg上设置了一个缩放侦听器,如下所示:

this.svg.call(this.zoom.scaleExtent([1/2, 40]).on("zoom" zoomed))

g 是的直接子节点 svg . 我看到很多例子和教程,建立了一个 rect 仅用于捕获鼠标事件。我看过这样的教程,尽管有 svg格式 它已经覆盖了视口的表面。为什么会有必要/有益?为什么不直接使用 svg格式

1 回复 | 直到 6 年前

altocumulus 6 年前

这是确保在整个视口中捕获鼠标事件的最安全的方法。当鼠标事件发生时,浏览器将执行以下操作 hit-testing graphics elements 在命中测试中被考虑,因此 <svg> 也不是 <g> 元素可以成为鼠标事件的直接目标,尽管一个事件最终可能会到达它们。

请注意,svg元素不是图形元素,在一致的svg独立文件中,最根的svg元素永远不会成为指针事件的目标,尽管事件可能指向该元素。

不过,对于嵌入式SVG文档,情况有些不同:

放置满刻度 <rect> 跨越整个视口以截获鼠标事件可确保命中测试的工作不依赖于SVG的环境或它所显示的用户代理(例如浏览器)。

推荐文章

Eddie Worthington · D3.js指针相对于轴域的坐标

2 年前

b404 · 如何在d3 react typescript应用程序中正确设置“path”元素中属性“d”的类型

3 年前

user6456564 · 双条形图创建

7 年前

MetalCat · 在d3中,如何在地图上的鼠标上方显示多个值?

7 年前

atdyer · 使用svg变换更新位置时,力模拟会出现抖动

7 年前

MTT · 最适合散点图的回归

7 年前

Cyley Simon · 以chile/name格式将Csv转换为json

7 年前

Himani · 线图和面积图之间的颜色不同

7 年前

Francis Katalinic · d3。使用d3通过ajax响应实现JSJSON。json()

7 年前

user9646441 · 为什么这个svg和数组会在angular中多次启动?

7 年前