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

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.    <!-- <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>-->
  5.  
  6.    <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
  7.  
  8.     <style type="text/css">
  9.       body, html {
  10.         width: %;
  11.         height: %;
  12.         margin: ;
  13.       }
  14.       svg {
  15.         position: absolute;
  16.         top: ;
  17.         left: ;
  18.       }
  19.       p {
  20.         text-align: center;
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <p>Use the mouse to pan (click and move) / zoom (scrollwheel)</p>
  26.   </body>
  27.   <script type="text/javascript">
  28.       var svg = d3.select("body")
  29.         .append("svg")
  30.         .attr("width", "100%")
  31.         .attr("height", "100%")
  32.         .call(d3.zoom().on("zoom", function () {
  33.             svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
  34.         }))
  35.         .append("g")
  36.  
  37.       svg.append("circle")
  38.         .attr("cx", document.body.clientWidth / )
  39.         .attr("cy", document.body.clientHeight / )
  40.         .attr("r", )
  41.         .style("fill", "#B8DEE6")
  42.   </script>
  43. </html>

仅缩放x轴的方法：

  1. svg.attr(
  2.     "transform",
  3.     'translate('+d3.event.transform.x+',0) scale('+d3.event.transform.k+',1)'
  4. )}))

对于那些想要限制平移和缩放边界的人。

更改此：

  1. // width, height = viewport width, height
  2. .call(d3.zoom().on("zoom", function () {
  3.   var tx = Math.min(, Math.max(d3.event.translate[], width - width * d3.event.scale));
  4.   var ty = Math.min(, Math.max(d3.event.translate[], height - height * d3.event.scale));
  5.   svg.attr("transform", "translate(" + [tx, ty] + ") scale(" + d3.event.scale + ")");
  6. });

对此：

  1. .call(d3.zoom().on("zoom", function () {
  2.   d3.event.transform.x = Math.min(, Math.max(d3.event.transform.x, width - width * d3.event.transform.k));
  3.   d3.event.transform.y = Math.min(, Math.max(d3.event.transform.y, height - height * d3.event.transform.k));
  4.   svg.attr("transform", d3.event.transform);
  5. }));

d3限制范围缩放和平移升级到版本4的更多相关文章

  1. 使用C++实现图形的旋转、缩放、平移

    编译环境:VS2017 编译框架:MFC 实验内容:显示一个三角形,并将其绕中心进行旋转.缩放以及平移等操作 实验步骤: 1.打开VS2017,并创建MFC项目,具体方法参见:http://www.c ...

  2. 初学Direct X（7） ——位图的旋转，缩放以及平移

    初学Direct X(7) --位图的旋转,缩放以及平移 本文旨在实现通过D3DXMatrixTransformation2D函数实现位图的旋转,缩放以及平移操作,但是具体的原理部分会在后面进一步的探 ...

  3. 利用canvas制作图片（可缩放和平移）+相框+文字

    前言: 公司一个售前问我能不能用H5做一个手机拍照,给相片添加相框和添加文字上传到服务器的功能,我当时一琢磨觉得可行,就利用空余时间做了一个demo,去掉了拍照和上传,如果以后有机会,会给补上,当然对 ...

  4. Three.js三维模型几何体旋转、缩放和平移

    创建场景中的三维模型往往需要设置显示大小.位置.角度,three.js提供了一系列网格模型对象的几何变换方法,从WebGL的角度看,旋转.缩放.平移对应的都是模型变换矩阵,关于矩阵变换内容可以观看本人 ...

  5. 非关系型数据库来了,CRL快速开发框架升级到版本4

    轮子?,我很任性,我要造不一样的轮子,同时支持关系型和非关系型的框架有没有 新版数据查询作了些调整,抽象了LabmdaQueryy和DBExtend,升级到版本4,非关系数据库MongoDB被支持了! ...

  6. ubuntu下升级R版本

    ubuntu下升级R版本   在测试<机器学习 实用案例解析>一书的邮件分类代码时,windows系统下rstudio中无法读取特殊字符,在ubuntu下可以.在ubuntu虚拟机下安装t ...

  7. Mac中使用port升级gcc版本

    Mac OS中的gcc版本可能不会满足实际使用要求,需要对其升级. 这里介绍使用port方式来升级gcc版本.Macports是Mac OS中的软件包管理工具. 首先,安装Macports 这里提供O ...

  8. 如何升级Ceph版本及注意事项

    升级软件版本在日常运维中是一个常见操作. 本文分享一下Ceph版本升级的一些经验. 一般升级流程和注意如下: 1.  关注社区Release notes 和 ceph-user邮件订阅列表,获取社区发 ...

  9. Windows2000安装Winform Clickonce提示升级系统版本的解决方案

    Windows2000安装Winform Clickonce提示升级系统版本.只需要把所有应用的DLL的独立性设置为false就可以了.

随机推荐

  1. tomcat源码分析01-启动过程概览

    导读:tomcat是一个开源的web服务器,它实现了我们常用的Servlet,JSP,EL等相关规范,因为其性能稳定,开源等因素得到越来越多开发者的青睐,出于学习的目的,我决定研读其源码,并将阶段性成 ...

  2. codeforces 1236 A. Bad Ugly Numbers

    A. Bad Ugly Numbers time limit per test 1 second memory limit per test 256 megabytes input standard ...

  3. Python中保留两位小数的几种方法

    https://blog.csdn.net/Jerry_1126/article/details/85009810 保留两位小数,并做四舍五入处理方法一: 使用字符串格式化>>> a ...

  4. pikachu学习-暴力破解模块

    安装好XAMPP,burpsuite,配置好pikachu我们就可以进行pikachu平台的漏洞学习 我这篇博客主要写暴力破解模块讲解,它分为4个小模块,分别是“基于表单的暴力破解”,“验证码绕过(o ...

  5. ASP.NET Core 奇淫技巧之伪属性注入

    一.前言 开局先唠嗑一下,许久未曾更新博客,一直在调整自己的状态,去年是我的本命年,或许是应验了本命年的多灾多难,过得十分不顺,不论是生活上还是工作上.还好当我度过了所谓的本命年后,许多事情都在慢慢变 ...

  6. ECMAScript 6 基础

    ECMAScript 6 基础 ECMAScript 6 简介 JavaScript 三大组成部分 ECMAScript DOM BOM ECMAScript 发展历史 https://develop ...

  7. TensorFlow 训练好模型参数的保存和恢复代码

    TensorFlow 训练好模型参数的保存和恢复代码,之前就在想模型不应该每次要个结果都要重新训练一遍吧,应该训练一次就可以一直使用吧. TensorFlow 提供了 Saver 类,可以进行保存和恢 ...

  8. vue2.0开发环境下解决跨域问题

    1.找到vue 项目下的配置文件 /config/index.js 2.找到 proxyTable 配置项 proxyTable: { '/api': { target: 'http://www.xx ...

  9. AQS源码解析

    文大篇幅引用自HongJie大佬的一行一行源码分析清楚AbstractQueuedSynchronizer,这只是一篇简单的个人整理思路和总结(倒垃圾),如果觉得有些难懂的话,不要犹豫也不要疑惑,很明 ...

  10. JS获取HTML DOM元素的方法

    JS获取HTML DOM元素有八种方法: 1.根据id获取标签元素: document.getElementById("id名"); 2.根据标签名获取标签列表: document ...