D3平移和缩放后的点击坐标(D3 click coordinates after pan and zoom)
我使用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)的更多相关文章
- d3限制范围缩放和平移升级到版本4
感谢您提供帮助以更新下面的代码以在版本4中工作.我已将zoom.behaviour更改为d3.zoom,但我不清楚所需的其他更改.看起来比v3还要复杂! <!DOCTYPE html> & ...
- 【C#/WPF】Image图片的Transform变换:平移、缩放、旋转
WPF中图像控件Image的变换属性Transform: 平移 缩放 旋转 即要想实现图片的平移.缩放.旋转,是修改它所在的Image控件的Transform变换属性. 下面在XAML中定义了Imag ...
- 地图的平移、缩放的实现(android版)
一.平移地图 移动地图的原理是利用手指在屏幕上拖动的距离,转换为在地图上距离,把地图坐标加上偏移的距离实现地图移动. 由于地图是绘制到Bitmap上的,所以地图移动和缩放的过程只要改变Bitmap的矩 ...
- osg中使用MatrixTransform来实现模型的平移/旋转/缩放
osg中使用MatrixTransform来实现模型的平移/旋转/缩放 转自:http://www.cnblogs.com/kekec/archive/2011/08/15/2139893.html# ...
- View的平移、缩放、旋转以及位置、坐标系
原创 2015年05月12日 13:15:29 标签: Android / Scroll / Scale / Translation / Rotation 24733 Android开发中,经常会接触 ...
- ARFoundation - 实现物体旋转, 平移,缩放
ARFoundation - 实现物体旋转, 平移,缩放 本文目的是为了确定在移动端怎样通过单指滑动实现物体的旋转,双指实现平移和缩放. 前提知识: ARFoundation - touch poin ...
- app使用微信支付成功后,点击返回到该app却跳到另外一个app去了
刚接手了公司iOS的两个APP, 现在碰到了这样一个问题: 有一台iPhone在一个APP中使用了微信支付,支付成功后,点击返回到该APP,结果却跳到了另外一个APP去了. 这两个APP都是公司开发的 ...
- osg矩阵变换节点-----平移旋转缩放
osg矩阵变换节点-----平移旋转缩放 转自:http://www.cnblogs.com/ylwn817/articles/1973396.html 平移旋转缩放这个三个是osg矩阵操作中,最常见 ...
- C# winform解决解决窗体第一次设置为最大化后,点击最大化按钮窗体无法居中问题
public frmMain() { InitializeComponent(); //解决窗体第一次设置为最大化后,点击最大化按钮窗体无法居中问题 int x = Convert.ToInt32(( ...
随机推荐
- java常用容器简要性能分析(List。Map。Set)
嗯,实习的时候看到这个,感觉蛮好,这里摘录学习,生活加油: 我曾经害怕别人嘲笑的目光,后来,发现他们的目光不会在我身上停留太久,人们更愿意把目光放在自己身上. 知乎上看到,讲给自己. List Lis ...
- ruby中的try catch
1.在ruby中,try catch并不是用来进行异常处理的,而是一种程序流程结构,例如break,continue,go-to等 2.例如如下代码 def promptAndGet(prompt) ...
- hive面试题
1. Hive数据倾斜原因: key分布不均匀 业务数据本身的特性 SQL语句造成数据倾斜解决方法hive设置hive.map.aggr=true和hive.groupby.skewindata=tr ...
- 给社团同学做的R语言爬虫分享
大家好,给大家做一个关于R语言爬虫的分享,很荣幸也有些惭愧,因为我是一个编程菜鸟,社团里有很多优秀的同学经验比我要丰富的多,这次分享是很初级的,适用于没有接触过爬虫且有一些编程基础的同学,内容主要有以 ...
- 零基础使用Swift学习数据科学
概述 Swift正迅速成为数据科学中最强大.最有效的语言之一 Swift与Python非常相似,所以你会发现2种语言的转换非常平滑 我们将介绍Swift的基础知识,并学习如何使用该语言构建你的第一个数 ...
- 开发一个基础的npm包
初始化项目 # 新建文件夹 mkdir whosmeya-npm-package-test # 进入 cd whosmeya-npm-package-test/ # 初始化 package.json, ...
- Python python 函数参数:参数组合
'''在Python中定义函数,可以用必选参数.默认参数.可变参数和关键字参数, 这4种参数都可以一起使用,或者只用其中某些 参数定义的顺序必须是:必选参数.默认参数.可变参数和关键字参数 ''' d ...
- FileReader 和Blob File文件对象(附formData初始化方法);
一.FileReader为读取文件对象 . api 地址 相关demo 现在只讨论 readAsArrayBuffer,readAsBinaryString,readAsDataURL,rea ...
- pip安装超时问题-pip._vendor.urllib3.exceptions.ReadTimeoutError: HTTPSConnectionPool(host='files.pythonhosted.org', port=443): Read timed out.
手动设置延时:(推荐) pip --default-timeout=100 install nibabel --或者不使用缓存pip --no-cache-dir install Pillow 更改 ...
- LayUI制作日历工作记录簿
标题不知道该如何取,大概就是用Lay UI的Table,制作一个日历,在日历上可以添加每天的工作简记录.记录下LayUI Table的一些用法,一些值得探索的地方在于日历生成后,给周末加背景色,当天加 ...