感谢您提供帮助以更新下面的代码以在版本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的更多相关文章

  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. 直径问题 Diameter Problems

    2019-11-03 21:37:59 一.Diameter of Binary Tree 问题描述: 问题求解: 解法一.第一反应是树上动归,每个节点保存一下左右的最大深度,最后以每个节点作为中枢计 ...

  2. Flume数据采集结合etcd作为配置中心在爬虫数据采集处理中的架构实践。

    Apache Flume是一个分布式的.可靠的.可用的系统,用于有效地收集. 聚合和将大量日志数据从许多不同的源移动到一个集中的数据存储,但是其本身是以本地properties作为配置的,配置无法做到 ...

  3. 图的深度优先搜索dfs

    图的深度优先搜索: 1.将最初访问的顶点压入栈: 2.只要栈中仍有顶点,就循环进行下述操作: (1)访问栈顶部的顶点u: (2)从当前访问的顶点u 移动至顶点v 时,将v 压入栈.如果当前顶点u 不存 ...

  4. iOS 内存分配与分区

    RAM ROM RAM:运行内存,不能掉电存储. ROM:存储性内存,可以掉电存储,例如内存卡.Flash. 由于 RAM 类型不具备掉电存储能力(即一掉电数据消失),所以 app 程序一般存放于 R ...

  5. 读者来信-5 | 如果你家HBase集群Region太多请点进来看看，这个问题你可能会遇到

    前言:<读者来信>是HBase老店开设的一个问答专栏,旨在能为更多的小伙伴解决工作中常遇到的HBase相关的问题.老店会尽力帮大家解决这些问题或帮你发出求救贴,老店希望这会是一个互帮互助的 ...

  6. 树形dp技巧，多叉树转二叉树

    今天复习树形dp时发现一道比较古老的题,叫选课,是树形dp的一道基础题,也是多叉树转二叉树应用的模版题 多叉树转二叉树的应用非常广泛,因为如果一个节点的儿子太多,一个一个存下来不方便去查询,并且会增加 ...

  7. Matlab GUI设计(2)

    11. (1)界面设计 (2)添加按钮的回调函数 function pushbutton1_Callback(hObject, eventdata, handles) % hObject handle ...

  8. Spring的IOC操作

    Spring的IOC操作 把对象的创建交给spring ioc操作两个部分 (1)ioc的配置文件方式 (2)ioc基于注解的方式 IOC 的底层原理 1.ioc底层原理使用技术 (1)xml配置文件 ...

  9. 002_Three.js 中添加阴影 - [Three.js] - [阴影效果]

    在Three.js中设置阴影效果,有多个地方需要设置属性. ![](https://img2018.cnblogs.com/blog/1735896/201912/1735896-2019123116 ...

  10. Light of future-测试总结

    目录 1.描述项目的测试工作安排 2.测试工具选择和运用 3.测试用例文档pdf的github链接地址 4.测试体会 5.项目测试评述 发布界面 后台CRUD 归属班级 →2019秋福大软件工程实践Z ...