d3限制范围缩放和平移升级到版本4
感谢您提供帮助以更新下面的代码以在版本4中工作。我已将zoom.behaviour更改为d3.zoom,但我不清楚所需的其他更改。看起来比v3还要复杂!
<!DOCTYPE html>
<html>
<head>
<!-- <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>--> <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> <style type="text/css">
body, html {
width: %;
height: %;
margin: ;
}
svg {
position: absolute;
top: ;
left: ;
}
p {
text-align: center;
}
</style>
</head>
<body>
<p>Use the mouse to pan (click and move) / zoom (scrollwheel)</p>
</body>
<script type="text/javascript">
var svg = d3.select("body")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.call(d3.zoom().on("zoom", function () {
svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
}))
.append("g") svg.append("circle")
.attr("cx", document.body.clientWidth / )
.attr("cy", document.body.clientHeight / )
.attr("r", )
.style("fill", "#B8DEE6")
</script>
</html>
仅缩放x轴的方法:
svg.attr(
"transform",
'translate('+d3.event.transform.x+',0) scale('+d3.event.transform.k+',1)'
)}))
对于那些想要限制平移和缩放边界的人。
更改此:
// width, height = viewport width, height
.call(d3.zoom().on("zoom", function () {
var tx = Math.min(, Math.max(d3.event.translate[], width - width * d3.event.scale));
var ty = Math.min(, Math.max(d3.event.translate[], height - height * d3.event.scale));
svg.attr("transform", "translate(" + [tx, ty] + ") scale(" + d3.event.scale + ")");
});
对此:
.call(d3.zoom().on("zoom", function () {
d3.event.transform.x = Math.min(, Math.max(d3.event.transform.x, width - width * d3.event.transform.k));
d3.event.transform.y = Math.min(, Math.max(d3.event.transform.y, height - height * d3.event.transform.k));
svg.attr("transform", d3.event.transform);
}));
d3限制范围缩放和平移升级到版本4的更多相关文章
- 使用C++实现图形的旋转、缩放、平移
编译环境:VS2017 编译框架:MFC 实验内容:显示一个三角形,并将其绕中心进行旋转.缩放以及平移等操作 实验步骤: 1.打开VS2017,并创建MFC项目,具体方法参见:http://www.c ...
- 初学Direct X(7) ——位图的旋转,缩放以及平移
初学Direct X(7) --位图的旋转,缩放以及平移 本文旨在实现通过D3DXMatrixTransformation2D函数实现位图的旋转,缩放以及平移操作,但是具体的原理部分会在后面进一步的探 ...
- 利用canvas制作图片(可缩放和平移)+相框+文字
前言: 公司一个售前问我能不能用H5做一个手机拍照,给相片添加相框和添加文字上传到服务器的功能,我当时一琢磨觉得可行,就利用空余时间做了一个demo,去掉了拍照和上传,如果以后有机会,会给补上,当然对 ...
- Three.js三维模型几何体旋转、缩放和平移
创建场景中的三维模型往往需要设置显示大小.位置.角度,three.js提供了一系列网格模型对象的几何变换方法,从WebGL的角度看,旋转.缩放.平移对应的都是模型变换矩阵,关于矩阵变换内容可以观看本人 ...
- 非关系型数据库来了,CRL快速开发框架升级到版本4
轮子?,我很任性,我要造不一样的轮子,同时支持关系型和非关系型的框架有没有 新版数据查询作了些调整,抽象了LabmdaQueryy和DBExtend,升级到版本4,非关系数据库MongoDB被支持了! ...
- ubuntu下升级R版本
ubuntu下升级R版本 在测试<机器学习 实用案例解析>一书的邮件分类代码时,windows系统下rstudio中无法读取特殊字符,在ubuntu下可以.在ubuntu虚拟机下安装t ...
- Mac中使用port升级gcc版本
Mac OS中的gcc版本可能不会满足实际使用要求,需要对其升级. 这里介绍使用port方式来升级gcc版本.Macports是Mac OS中的软件包管理工具. 首先,安装Macports 这里提供O ...
- 如何升级Ceph版本及注意事项
升级软件版本在日常运维中是一个常见操作. 本文分享一下Ceph版本升级的一些经验. 一般升级流程和注意如下: 1. 关注社区Release notes 和 ceph-user邮件订阅列表,获取社区发 ...
- Windows2000安装Winform Clickonce提示升级系统版本的解决方案
Windows2000安装Winform Clickonce提示升级系统版本.只需要把所有应用的DLL的独立性设置为false就可以了.
随机推荐
- Nginx双机主备(Keepalived实现)
前言 首先介绍一下Keepalived,它是一个高性能的服务器高可用或热备解决方案,起初是专为LVS负载均衡软件设计的,Keepalived主要来防止服务器单点故障的发生问题,可以通过其与Nginx的 ...
- babel-loader配置
1.npm i @babel/core.@babel/preset-env.@babel/runtime.@babel/plugin-transform-runtime.@babel/plugin-p ...
- Happens-before先行发生原则
简介 从JDK1.5,java使用新的JSR-133内存模型:JSR-133使用happens-before的概念来阐述操作之间的内存可见性:在JMM中,如果一个操作执行的结果需要对另一个操作可见,那 ...
- Django CBV加装饰器、Django中间件、auth模块
一. CBV加装饰器 在视图层中,基于函数的视图叫FBV(function base views),基于类的视图叫CBV(class base views).当需要用到装饰器时,例如之前的基于Cook ...
- 李瑞红 201771010111《面向对象程序设计(java)》第一周学习总结
李瑞红 201771010111<面向对象程序设计(java)>第一周学习总结 第一部分:课程准备部分 填写课程学习 平台注册账号, 平台名称 注册账号 博客园:www.cnblogs.c ...
- Linux上安装配置Keepalived
Linux上安装配置Keepalived 1.下载 自行去Keepalived官网进行下载,也可以通过如下链接进行下载2.0.18版本(目前的稳定版) 链接:https://pan.baidu.com ...
- Hive常用的10个系统函数及作用
聚合函数 函数处理的数据粒度为多条记录. sum()—求和 count()—求数据量 avg()—求平均直 distinct—求不同值数 min—求最小值 max—求最人值 分析函数 Analytic ...
- SpannableStringBuilder实现TextView华丽变身
前言 想要在TextView 的文本添加一些突出文字,然后点击可以进行跳转,首先想到的就是TextView拼接,但是考虑到换行后的显示又不是很合适,一番查询后发现了SpannableStringBui ...
- 微服务实战——高可用的SpringCloudConfig
管理微服务配置 对于单体应用架构来说,会使用配置文件管理我们的配置,这就是之前项目中的application.properties或application.yml.如果需要在多环境下使用,传统的做法是 ...
- OpenCV-Python 直方图-3:二维直方图 | 二十八
目标 在本章中,我们将学习查找和绘制2D直方图.这将在以后的章节中有所帮助. 介绍 在第一篇文章中,我们计算并绘制了一维直方图. 之所以称为一维,是因为我们仅考虑一个特征,即像素的灰度强度值. 但是在 ...