我使用D3库来创建绘图应用程序。

我需要在用户单击的坐标上绘制对象(为了简单起见)。问题是当用户使用平移&缩放和移动视口。
然后对象是错误的位置的地方(我想问题是事件坐标是相对于svg元素而不是g,所以他们是计算没有适当的转换)。

< pre> $('svg')。on('click',function(event){
d3.select('#content-layer')。append )
.attr('r',10)
.attr('cx',event.offsetX)
.attr('cy',event.offsetY)
.attr ('stroke','black')
.attr('fill','white');
});

var zoomBehavior = d3.behavior.zoom()
.scaleExtent([1,10])
.on('zoom',()=> {
var translate =translate(+ d3.event.translate +);
var scale =scale(+ d3.event.scale +);
d3.select '#content-layer')。attr(transform,translate + scale);
});

d3.select('svg')。call(zoomBehavior);

我试图添加点击回调到g元素,但它不工作

这里是jsfiddle:
https://jsfiddle.net/klinki/53ftaw7r/

解决方案

基本上你需要

所以我创建了一个变量:

  var translateVar = [0,0];   

当您平移更新此变量时:

  translateVar [0] = d3.event.translate [0]; 
translateVar [1] = d3.event.translate [1];

并将其添加到圈子的坐标:

  .attr('cx',mouseCoords [0]  -  translateVar [0])
.attr('cy',mouseCoords [1] - translateVar [1] )

更新小提琴:https://jsfiddle.net/thatoneguy/53ftaw7r/2/

您还需要照顾缩放因此做类似的事情:

  var scaleVar = 1;   

在缩放时更新变量:

  scaleVar = d3.event.scale   

新坐标:

  .attr('cx',(mouseCoords [0]  -  translateVar [0])/ scaleVar)
.attr cy',(mouseCoords [1] - translateVar [1])/ scaleVar)

a href =https://jsfiddle.net/thatoneguy/53ftaw7r/5/ =nofollow> https://jsfiddle.net/thatoneguy/53ftaw7r/5/

D3平移和缩放后的点击坐标(D3 click coordinates after pan and zoom)的更多相关文章

  1. d3限制范围缩放和平移升级到版本4

    感谢您提供帮助以更新下面的代码以在版本4中工作.我已将zoom.behaviour更改为d3.zoom,但我不清楚所需的其他更改.看起来比v3还要复杂! <!DOCTYPE html> & ...

  2. 【C#/WPF】Image图片的Transform变换:平移、缩放、旋转

    WPF中图像控件Image的变换属性Transform: 平移 缩放 旋转 即要想实现图片的平移.缩放.旋转,是修改它所在的Image控件的Transform变换属性. 下面在XAML中定义了Imag ...

  3. 地图的平移、缩放的实现(android版)

    一.平移地图 移动地图的原理是利用手指在屏幕上拖动的距离,转换为在地图上距离,把地图坐标加上偏移的距离实现地图移动. 由于地图是绘制到Bitmap上的,所以地图移动和缩放的过程只要改变Bitmap的矩 ...

  4. osg中使用MatrixTransform来实现模型的平移/旋转/缩放

    osg中使用MatrixTransform来实现模型的平移/旋转/缩放 转自:http://www.cnblogs.com/kekec/archive/2011/08/15/2139893.html# ...

  5. View的平移、缩放、旋转以及位置、坐标系

    原创 2015年05月12日 13:15:29 标签: Android / Scroll / Scale / Translation / Rotation 24733 Android开发中,经常会接触 ...

  6. ARFoundation - 实现物体旋转, 平移,缩放

    ARFoundation - 实现物体旋转, 平移,缩放 本文目的是为了确定在移动端怎样通过单指滑动实现物体的旋转,双指实现平移和缩放. 前提知识: ARFoundation - touch poin ...

  7. app使用微信支付成功后,点击返回到该app却跳到另外一个app去了

    刚接手了公司iOS的两个APP, 现在碰到了这样一个问题: 有一台iPhone在一个APP中使用了微信支付,支付成功后,点击返回到该APP,结果却跳到了另外一个APP去了. 这两个APP都是公司开发的 ...

  8. osg矩阵变换节点-----平移旋转缩放

    osg矩阵变换节点-----平移旋转缩放 转自:http://www.cnblogs.com/ylwn817/articles/1973396.html 平移旋转缩放这个三个是osg矩阵操作中,最常见 ...

  9. C# winform解决解决窗体第一次设置为最大化后,点击最大化按钮窗体无法居中问题

    public frmMain() { InitializeComponent(); //解决窗体第一次设置为最大化后,点击最大化按钮窗体无法居中问题 int x = Convert.ToInt32(( ...

随机推荐

  1. 记一次RSA解密过程

    有问题可以评论 openssl rsa -pubin -text -modulus -in warmup -in pub.key

  2. 常用的API和基础算法

    和数学相关 1,java.lang.Math类 abs(x):求绝对值 sqrt(x):求平方根 pow(x,y):求x的y次方 ceil(x):向上取整 floor(x):向下取整 round(x) ...

  3. JS中iframe子页面与父页面之间通信

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...

  4. Remmina

    什么是Remmina? Remmina作为一个远程连接服务器,可以方便快捷的帮你连接服务器,不用直接使用命令行的方式去连接服务器,使用也很简单.具体下载直接在APP中下载就好,Linux自带这个软件, ...

  5. 题解 P4344 【[SHOI2015]脑洞治疗仪】

    前言 这道题目呢,看上去很难,实际上我们可以用线段树解决这道题目. 正文 我们维护 sum.len.tag.lmax.rmax.ans. sum 就是这段区间非脑洞的个数 len 就是这段区间的长度 ...

  6. 机器学习3- 一元线性回归+Python实现

    目录 1. 线性模型 2. 线性回归 2.1 一元线性回归 3. 一元线性回归的Python实现 3.1 使用 stikit-learn 3.1.1 导入必要模块 3.1.2 使用 Pandas 加载 ...

  7. arcgis server10.7修改打印模板后前台调用不生效

    在10.5.1及之前的版本中,如果更改打印地图模板,如字体设置,那么直接修改[ArcGIS for Server 安装目录]/Templates/ExportWebMapTemplates下的mxd的 ...

  8. 403 Invalid CORS request 跨域问题

    5.跨域问题 跨域:浏览器对于javascript的同源策略的限制 . 以下情况都属于跨域: 跨域原因说明 示例 域名不同 www.jd.com 与 www.taobao.com 域名相同,端口不同 ...

  9. js函数基础回顾

    回头又跑去看了下尚硅谷的js基础视频 https://www.bilibili.com/video/av22958172/?p=51. 便做了如下笔记: 1.函数也是一个对象 2.函数可以封装一些功能 ...

  10. 关于js在一个固定的盒子里面拖拽的问题(包含临界值)

    回武汉打卡第三天,武汉加油,逆战必胜!今天我们一起分享一下js拖拽的问题. 当然实现拖拽方法是有很多的,下面简单讲一种方法,大致思路如下: 首先需要用到的事件主要有  onmousedown,onmo ...