首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在d3触摸事件中获取y坐标

在d3中,可以使用d3.event对象来获取触摸事件的相关信息,包括触摸点的坐标。要获取触摸事件的y坐标,可以使用d3.event.touches属性来获取触摸点的信息,然后通过d3.touches()方法获取触摸点的数组。每个触摸点都包含了clientY属性,表示触摸点相对于浏览器窗口视口的y坐标。

以下是一个示例代码:

代码语言:txt
复制
d3.select("svg")
  .on("touchstart", function() {
    var touches = d3.touches(this);
    var y = touches[0].clientY;
    console.log("Y坐标:" + y);
  });

在上面的代码中,我们给一个SVG元素绑定了touchstart事件,并使用d3.touches()方法获取触摸点的数组。然后,我们可以通过touches[0].clientY来获取第一个触摸点的y坐标。

关于d3的触摸事件和坐标获取,你可以参考d3官方文档。如果你想了解更多关于d3的信息,可以访问腾讯云的d3产品介绍页面

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

手机网页手指触摸计算 --JQuery 获取touchstart,touchmove,touchend 坐标

JQuery写法 ---- 1 //手指开始触摸时,触发事件 2 $("#id").on('touchstart',function(e){ 3 4 var touch = e.originalEvent.targetTouches...[0]; //取页面上第一个手指 5 6 var x_ distance = touch.pageX; //获取手指在X轴上距最左边的距离 7 8 }) 三个函数: touchstart --...(手指放在页面时触发) touchend --(手指离开页面时触发) touchmove --(手指移动时触发) 获取手指第几个函数: e.originalEvent.changedTouches[0]...--(获取第一个手指,0->1) 获取距离(touch为获取手指的变量名): touch.pageX --获取手指在X轴上距最左边的距离 touch.pageY --获取手指在Y轴上距最上边的距离 -....addEventListener("touchstart",function(e){ 3 var x=e.touches[0].pageX; //第一个手指距最左边距离 4 var y=

1.3K20
  • 【Android 应用开发】多点触控 ( 多点触控事件 | PointerId | PointerIndex | 坐标获取 | 触摸点个数 )

    触摸点个数获取 ( getPointerCount ) VI . 触摸坐标获取 VII . 多点触控 示例代码 ( 参考 ) I . 多点触控事件 ---- 1 ....触摸坐标获取 ---- 获取触摸坐标 : ① 获取当前触摸事件坐标 : public final float getX() public final float getY() ② 获取指定触摸点索引...获取 坐标 //1.1 获取 当前 触摸 事件的 x y 坐标 float x = event.getX(); float y = event.getY(); //1.2 获取 指定 pointerIndex...的 x y 坐标 ( 获取第 0 个索引的坐标 ) int pointerIndex = 0; float x_pointer = event.getX(pointerIndex); float y_pointer...获取 坐标 //1.1 获取 当前 触摸 事件的 x y 坐标 float x = event.getX(); float y = event.getY

    1.3K20

    ArcEngine三维开发时如何在ArcSceneControl获取实时x,y,z坐标并显示到状态栏(也就是基于ArcObjects开发)

    在基于ArcEngine的三维开发时,如何在ArcSceneControl获取实时x,y,z坐标并显示到状态栏: 很明显,要让鼠标在三维场景视图ArcSceneControl中移动时,在状态栏实时显示...xyz坐标,肯定要用到的是OnMouseMove事件。...首先添加该事件,然后在状态栏添加三个显示坐标值的控件,可以是文本框、标签等,能显示坐标文本就行了。这里就不赘述了,比较简单。...下面看最核心的代码,就是如何获取xyz坐标值:             barEditItemX.EditValue = "";             barEditItemY.EditValue =...axSceneControlMain.SceneGraph.LocateMultiple(axSceneControlMain.SceneGraph.ActiveViewer, e.x, e.y,

    1.5K30

    D3库实践笔记之图表交互 |可视化系列36

    事件监听器 JavaScript 有一个事件模型,在这个模型,“事件”由发生的事情来触发,比如用户通过键鼠或触摸屏输入信息。大多数情况下,没人监听事件事件就自生自灭,我们就无感知。...常用的触屏事件有以下三种: •touchstart:当触摸点被放在触摸屏上时,也就是触摸到某个元素;•touchmove:当触摸点在触摸屏上移动时;•touchend:当触摸点从触摸屏上拿开时; 我们可以为触摸事件配置点击事件以及拖动事件...需要说明的是在v3.x版本是使用d3.behavior.zoom()创建缩放行为,而v5.x及之后的版本是d3.zoom(),不再有behavior这一层抽象; 给矩形和坐标轴添加缩放交互响应: var...漫游是一种拖拽效果,但在力导向图等的交互,我们希望有更纯粹的拖拽元素效果,因此d3也有d3.drag()用于创建拖拽行为。...基础可视化实现挺简单,而深度交互的内容很多,更优雅的过渡和渐变效果、更深入的适应触摸设备交互、迷你图加入悬停框等等,在之后的具体实践深入学习。

    5.4K00

    WPF 从裸 Win 32 的 WM_Pointer 消息获取触摸点绘制笔迹

    本文将告诉大家如何在 WPF 里面,接收裸 Win 32 的 WM_Pointer 消息,从消息里面获取触摸点信息,使用触摸点信息绘制简单的笔迹 开始之前必须说明的是使用本文的方法不会带来什么优势,既不能带来笔迹书写上的加速...大家可以尝试在 Touch 事件监听函数添加断点,通过堆栈可以看到是从 Windows 消息循环来的 可以从调用堆栈看到如下函数,此函数就是核心的 WPF 框架里面从 WM_Pointer 消息获取触摸信息的代码...,和从 WPF 提供的 Touch 或 Stylus 事件里面获取触摸信息的来源是相同的 这时候也许有人会说,在 WPF 里面经过了一些封装,可能性能不如自己写的。...且别忘了消息是从 UI 线程里面获取的,无论你用不用 WPF 的事件,在 WPF 底层的解析消息获取触摸数据引发事件的代码都会跑,也就是无论你用不用,需要 WPF 干的活一点都没少。...在 Windows 的 WISPTIS 模块里面,也会对触摸做一定的平滑算法,丢弃某些过于离谱的触摸点。

    14010

    Android的FixScrollView自定义控件

    接下来要了解几个知识点, ①了解下Android事件分发的机制  ②了解哪些触摸类型事件以及之间的联系 ③如何在ViewGroup寻找子控件(递归 找一个具体的控件大坑,尤其是再React-Native...一个触摸事件,如果事件坐标处于ViewGroup所“管辖范围”,首先调用的是该ViewGroup的dispatchTouchEvent函数,dispatchTouchEvent函数内部调用onInterceptTouchEvent...2了解那些触摸事件 down(落下事件如果被消耗即返回true,那么后续move->...move->up事件不会转发) move--手指屏幕移动事件(可以根据down的x,y值与move事件判断手势是否向上或者向下滑动...) up--手指抬起事件 3如何在ViewGroup寻找子控件 使用递归+instanceof可以父ScrollView找到一组类型相同的控件,想找某一个tab子页面某一个ListView,太坑了!...测试页面布局: image.png 第二个tab的listview的(x,y坐标 image.png 第三个tab的listview(x,y坐标 image.png 后面通过Hierarchy

    1.8K80

    触屏事件

    touch:触摸事件 常用触摸事件如下 事件 描述 touchstart 手指触摸到dom元素时触发 touchmove 手指在dom元素上滑动时触发 touchend 手指离开dom元素时触发 触摸事件对象...触摸板等)的状态变化的事件,这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少等等 上述三个事件都有各自的事件对象 touchstart常用对象列表 触摸列表 描述 touches...正在触摸屏幕的所有手指的一个列表 targetTouches 正在触摸当前dom元素上的手指的一个列表 changedTouches 手指状态发生改变的列表,从无到有,从有到无变化 targetTouches...{ //获取手指初始坐标 startX = e.targetTouches[0].pageX; startY = e.targetTouches...[0].pageY; //获取盒子原来的坐标 x = this.offsetLeft; y = this.offsetTop;

    76410

    touchesBegan 触摸事件

    一、概念介绍 1、在用户使用App过程,会产生各种各样的事件,iOS事件可以分为3大类型: 1)触摸事件 2)加速计事件 3)远程操控事件 响应者对象UIResponder 在iOS...不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事件。...; 5)获取当前触摸事件所处的状态 触摸事件在屏幕上有一个周期,即触摸开始、触摸点移动、触摸结束,还有中途取消。...类 UIEvent:成为事件对象,记录产生的时刻和类型,事件对象包含于当前多点触摸序列相对应的所有触摸对象,还可以提供与特定视图或窗口相关联的触摸对象。...NSSet *)touchesForGestureRecognizer:(UIGestureRecognizer *)gesture; 五、实例 1、获取触摸点的坐标 - (void

    82220

    WPF 从触摸消息转触摸事件

    在 WPF 程序可能因为一些坑让程序触摸失效,如果此时还可以收到系统的触摸消息,那么可以通过从触摸消息转触摸事件解决程序触摸失效但不适合所有触摸失效程序 在 WPF 的触摸代码写的不是很清真,特别是触摸事件可能出现一些坑...,WPF 在触摸线程等待主线程窗口关闭会让主线程和触摸线程相互等待 和 WPF 插拔触摸设备触摸失效 等,有时候在开机的过程,如果启动快了,触摸设备还没准备好,刚好在 WPF 初始化的过程 USB 触摸设备才准备好...,从 WPF 模拟触摸设备 找到通过封装的 Down 等方法可以转换为事件,请看代码 在 GetTouchInputInfo 方法拿到的输入的类包含了当前触摸的屏幕坐标触摸的面积,拿到的数据其实是原有是的百分之一也就是需要除以.../// 触控输入的 y 坐标(垂直点)。...因为主窗口期望的是返回的输入的点是相对的主窗口的坐标而不是相对于屏幕的坐标 所有代码放在 github 欢迎小伙伴帮忙修改 除了通过 Touch 消息之外,在 Win7 以上的系统, Window 10

    1.2K20

    移动端的touch事件处理

    关于这个事件的确切出发时间,文档并没有具体说明,咱们只能去猜测了。触摸事件还包含下面三个用于跟踪触摸的属性       touches:表示当前跟踪的触摸操作的touch对象的数组。  ...clientX:触摸目标在视口中的x坐标。  clientY:触摸目标在视口中的y坐标。  identifier:标识触摸的唯一ID。  pageX:触摸目标在页面的x坐标。  ...pageY:触摸目标在页面y坐标。         screenX:触摸目标在屏幕的x坐标。screenY:触摸目标在屏幕y坐标。  target:触目的DOM节点目标。...更让我疑惑的是,此时,这三个属性,都能正确的获取到触点的个数,有几根手指,就能有在各个属性,就会保存多少个touch对象。属性属性值touches保存当前一个触摸个数的列表。...明白了touhes,targetTouches和changedTouches三者的这一个小小的差别,也就能理解,为何在我们判断滑动方向时,使用changedTouches获取触点的在touchstart

    1.7K20

    原生 JS 手写一个优雅的图片预览功能,带你吃透背后原理

    在监听事件我们可以通过 event 对象获取各种属性,例如常用的 offsetX、offsetY 相对偏移量,clientX、clientY 距离窗口的横坐标和纵坐标等。...指针 是输入设备的硬件层抽象(比如鼠标,触摸笔,或触摸屏上的一个触摸点),它能指向一个具体表面(屏幕)上的一个(或一组)坐标,可以表示包括接触点的位置,引发事件的设备类型,接触表面受到的压力等。...其中我们利用 pointerId 标识触摸点,移动事件根据事件对象的 pointerId 来更新对应触点(指针)的数据,当触点抬起时则从Map删除点位:let touches = new Map()...图片在上一篇文章手写拖拽效果我也讲到了如何在JS中使用数学方法计算两点间距离,下面介绍另一种常见的简洁写法,Math.hypot() 函数返回其参数的平方和的平方根:图片nd.y - start.y)...这么说有点抽象,我们还是回到代码,在双指缩放时将这个偏移量减掉,同样的在PC端的缩放,我们也加入对偏移量的修正:let scaleOrigin = { x: 0, y: 0, }// 获取中心改变的偏差

    3.2K81

    Android Scroll分析

    所以要实现View的滑动,必须要监听用户的触摸事件,并根据事件传入的坐标,动态且不断的改变View的坐标,从而实现View跟随用户触摸的滑动而滑动。...另外在触控事件中使用 getRawX(),getRawY()方法所获得的坐标同样是Android坐标坐标。...在触摸事件,通过getX()和getY()所获得的坐标就是视图坐标坐标。 ---- 触控事件-MotionEvent 触控事件MotionEvent在用户交互,占据着举足轻重的位置。...getY():获取点击事件距离控件顶边的距离,即视图坐标 getRawX():获取点击事件距离整个屏幕左边的距离,即绝对坐标 getRawY():获取点击事件距离整个屏幕顶边的距离,即绝对坐标...---- 实现滑动的七种方法 不管使用何种方法,其实现的基本思路是一致的:当触摸View时,系统记下当前触摸坐标,当手指移动时,系统记下移动后的触摸坐标,从而获取到相对于前一次坐标点的偏移量,并通过偏移量来修改

    80820

    js移动端touch事件

    触摸事件是在移动设备(智能手机或平板电脑)上查看页面时触发的事件。 它们允许您跟踪多点触摸事件。...我们有4个触摸事件: touchstart 触摸事件已经启动(触摸表面) touchend 一个触摸事件已经结束(表面不再被触摸) touchmove 触摸移动手指(或任何接触设备的东西)在表面移动 touchcancel...触摸事件已被取消 每当一个触摸事件发生,会触发一个触摸事件: const link = document.getElementById('my-link') link.addEventListener...clientX / clientY 无论是否滚动,鼠标指针相对于浏览器窗口的x和y坐标 screenX / screenY 屏幕坐标鼠标指针的x和y坐标 pageX / pageY 页面坐标(包括滚动...)鼠标指针的x和y坐标 目标被触及的元素

    8.9K20

    第127天:移动端-获取触摸点的位置

    一、移动端轮播图滑动 1、先获取手指在轮播图元素上的滑动方向(左右) (1)手指触摸开始时记录手指所在的坐标X (2)获取界面上的轮播图容器 var $carousels=$('.carousel')...; (3)注册滑动事件 (4)变量重复赋值 (5)结束触摸的一瞬间记录最后手指所在坐标X (6)比较开始和结束的坐标大小 (7)控制精度 获取每次手指滑动的距离,当距离大于一定值时,就认为有方向变化...next':'prev'); 40 41 42 43 } 二、移动端获取触摸点的方式说明 1.touchstart事件        手指头触摸屏幕上的事件 2.touchmove...clientX:触摸目标在视口中的x坐标。 clientY:触摸目标在视口中的y坐标。 identifier:标识触摸的唯一ID。 pageX:触摸目标在页面的x坐标。...pageY:触摸目标在页面y坐标。 screenX:触摸目标在屏幕的x坐标。 screenY:触摸目标在屏幕y坐标。 target:触目的DOM节点目标。

    1.5K20

    触屏事件

    比如触屏事件 touch(也称触摸事件),Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。...触摸事件对象(TouchEvent) TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。...可以实现拖动元素 但是拖动元素需要当前手指的坐标值 我们可以使用  targetTouches[0] 里面的pageX 和 pageY 移动端拖动的原理:    手指移动,计算出手指移动的距离...然后用盒子原来的位置 + 手指移动的距离 手指移动的距离:  手指滑动的位置 减去  手指刚开始触摸的位置 拖动元素三步曲: (1) 触摸元素 touchstart: 获取手指初始坐标,同时获得盒子原来的位置...; var div = document.querySelector("div"); var startX = 0; // 获取手指初始坐标 var startY =

    73020

    移动端触屏事件

    比如触屏事件 touch(也称触摸事件),Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。...触摸事件对象(TouchEvent) TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。... //触摸事件对象 // 1.获取元素 // 2.手指触摸DOM元素事件 var div = document.querySelector('div' ); div.addEventL...然后用盒子原来的位置 + 手指移动的距离 手指移动的距离:  手指滑动的位置 减去  手指刚开始触摸的位置 拖动元素三步曲: (1) 触摸元素 touchstart: 获取手指初始坐标,同时获得盒子原来的位置...[0].pageY; // 获取元素开始位置 x = div.offsetLeft; y = div.offsetTop;

    2.9K30

    JavaScript——触屏事件

    比如触屏事件touch(也称触摸事件),Android和IOS都有。 touch对象代表一个触摸点,触摸点可能是一个手指,也可能是一根触摸笔。...触摸事件对象 TouchEvent是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化事件。...touchstart、touchmove、touchend三个事件都会各自事件对象 触摸事件对象重点我们看三个常见对象列表: 触摸列表 说明 touches 正在触摸屏幕的所有手指的一个列表 targetTouches...但是拖动元素需要当前手指的坐标值我们可以使用targetTouchies[0]里面的pageX和pageY 移动端拖动的原理:手指移动,计算出手指移动的距离,然后用盒子原来的位置+手指移动的距离 手指移动的距离...:手指滑动的位置减去手指刚开始触摸的位置 拖动元素三步曲: 触摸元素touchstart:获取手指初始坐标,同时获得盒子原来的位置 移动手指touchmove:计算手指的滑动距离,并且移动盒子 离开手指

    2.1K10

    18.Llinux-触摸屏驱动(详解)

    引脚说明: YM: (Y Minus)触摸屏的Y坐标的负线,也可以用Y -表示 YP : (Y Power)触摸屏的Y坐标的正线, 也可以用Y+表示 XM: (Y Minus)触摸屏的Y坐标的负线, 也可以用...X-表示 XP : (Y Power)触摸屏的Y坐标的正线, 也可以用X+表示 4.1  4线触摸屏包含了两个阻性层,如下图所示: 当没有触摸按下时,X层和Y层是分离的,此时就测不到电压 4.2 测X坐标方向时...X/Y 方向转换模式 当ADC转换成功,  X 坐标值到 ADCDAT0 和 Y 坐标值到ADCDAT1 后,就会产生INT_ADC中断 自动获取XY坐标时(如下图): 设置寄存器ADCTSC=0X0C...结构体 2)设置input_dev的成员   -> 2.1)设置input_dev->evbit支持按键事件,绝对位移事件       (触摸屏:通过按键BTN_TOUCH获取按下/松开,通过绝对位移获取坐标...XY自动转换模式,启动一次ADC转换,ADC转换成功,会进入ADC中断 6.4 在IRQ_ADC中断函数: 1)获取ADCDAT0的位[9:0],来算出XY方向坐标值 2)测量n次值保存在数组,然后再次设置为

    3.4K91
    领券