d3.js实现svg缩放功能

刘玉平发布于2019-08-01 17:29 / 1453人阅读

摘要：本文代码转载自，通过实现缩放很简单，但是滚轮和按钮能够完美缩放就不那么容易了，如果有对感兴趣的小伙伴可以参考下面代码。构造一个新的缩放行为。指定当前的缩放平移向量为如果未指定，返回当前平移向量，默认。

本文代码转载自Stack Overflow，通过d3.js实现缩放很简单，但是滚轮和按钮能够完美缩放就不那么容易了，如果有对d3感兴趣的小伙伴可以参考下面代码。

JSFiddle地址: Demo online

看本帖前最好掌握如下技术：

js/css 基本知识

d3.js 语法比较类似jquery

html5 svg 画图标签

d3.behavior.zoom()

该行为会自动在容器元素中创建事件监听器来处理元素的缩放和平移动作，可支持鼠标事件和触摸事件。
构造一个新的缩放行为。构造之后，可以通过selection.call()将此行为应用于选择器：

var zoom = d3.behavior.zoom();
selection.call(zoom);

所有注册的监听器都使用 "zoom" 命名空间, 故如下可以移除缩放行为:

selection.on(".zoom", null);

zoom(selection)

应用缩放行为到指定的选择器 selection，注册所需的事件监听器，支持缩放和拖拽行为。

zoom.translate([translate])

指定当前的缩放平移向量为translate；如果未指定translate，返回当前平移向量，默认：[0, 0]。

zoom.scale([scale])

指定当前的缩放比例，如果未指定scale，则返回当前的缩放比例，默认为1

index.html



Zoom + Pan

GPU云服务器云服务器图片缩放功能 html5缩放功能 d3.js d3.js 视频

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51170.html

d3.js实现svg缩放功能

摘要：本文代码转载自，通过实现缩放很简单，但是滚轮和按钮能够完美缩放就不那么容易了，如果有对感兴趣的小伙伴可以参考下面代码。构造一个新的缩放行为。指定当前的缩放平移向量为如果未指定，返回当前平移向量，默认。本文代码转载自Stack Overflow，通过d3.js实现缩放很简单，但是滚轮和按钮能够完美缩放就不那么容易了，如果有对d3感兴趣的小伙伴可以参考下面代码。 JSFiddle地址: ...

guqiu 2019-08-20 18:55 评论0 收藏0
D3.js绘制实时映射的缩略图

摘要：在做可视化的很多时候，我们需要在主图的一角设置一个缩略图来掌握全局情况。，缩略图的绘制完成，很简单的例子，按照这个思路可以完成大部分可视化的缩略图绘制。在做可视化的很多时候，我们需要在主图的一角设置一个缩略图来掌握全局情况。本次将使用力导向图作为例子，完成缩略图的实现。绘制的原理就是依靠主图的数据再画一个图出来，无需再次计算，只改变图形形态。最终效果主图节点拖动，缩略图跟着变化...

miqt 2019-08-21 16:47 评论0 收藏0
d3.js制作蜂巢图表带动画效果

摘要：高斯模糊滤镜创建添加模糊滤镜添加辅助滤镜添加模糊滤镜添加辅助滤镜重点说一下最后的，它的作用是把滤镜效果和原图混合起来。 showImg(https://segmentfault.com/img/bVbv2Eu); 以上是效果图，本图表使用d3.js v4制作。图表主要功能是在六边形格子中显示数据，点击底部图标可以切换指定格子高亮显示，图表可以随浏览器任意缩放。 1.图表的主体结构是由...

CarterLi 2019-08-26 10:36 评论0 收藏0
D3.js实现拓扑图

摘要：最近写项目需要画出应用程序调用链的网路拓扑图，完全自己写需要花费些时间，那么首先想到的是但的自定义写法写起来非常麻烦，而且它的文档都是基于配置说明的，对于自定义开发不太方便，尝试后果断放弃，改用，自己完全可控。最近写项目需要画出应用程序调用链的网路拓扑图，完全自己写需要花费些时间，那么首先想到的是echarts,但echarts的自定义写法写起来非常麻烦，而且它的文档都是基于配置说明...

cooxer 2019-08-22 18:25 评论0 收藏0