d3.js实现图形缩放平移


Posted in Javascript onDecember 19, 2019

本文实例为大家分享了d3.js实现图形缩放平移的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>缩放操作</title>
</head>
<body>
<script src = "d3.js"></script>
<script>
  var width = 400,
      height = 400;
  var circles =[{cx:150,cy:200,r:30},
    {cx:250,cy:200,r:30}]
  var svg = d3.select("body").append("svg")
      .attr("width",width)
      .attr("height",height)
 
 
  //定义缩放函数
  var zoom = d3.behavior.zoom()
      .scaleExtent([1,10])//用于设置最小和最大的缩放比例
      .on("zoom",zoomed)
 
  //绘制
  var g = svg.append("g")
      .call(zoom)
  g.selectAll("circle")
      .data(circles)
      .enter()
      .append("circle")
      .attr("cx", function (d) {
        return d.cx
      })
      .attr("cy", function (d) {
        return d.cy
      })
      .attr("r", function (d) {
        return d.r
      })
      .attr("fill","black")
  function zoomed(){
    g.attr("transform","translate("+d3.event.translate+")scale("+d3.event.scale+")")
  } //d3.event.translate 是平移的坐标值,d3.event.scale 是缩放的值。
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript document.images实例
May 27 Javascript
客户端js性能优化小技巧整理
Nov 05 Javascript
jquery map方法使用示例
Apr 23 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
js实现点击链接后延迟3秒再跳转的方法
Jun 05 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 Javascript
js实现随机点名功能
Dec 23 Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 #Javascript
echarts实现折线图的拖拽效果
Dec 19 #Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 #Javascript
Echarts实现单条折线可拖拽效果
Dec 19 #Javascript
Webpack设置环境变量的一些误区详解
Dec 19 #Javascript
Echarts实现多条折线可拖拽效果
Dec 19 #Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 #Javascript
You might like
PHP中几个常用的魔术常量
2012/02/23 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
Javascript模块模式分析
2008/05/16 Javascript
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
js实现日历的简单算法
2017/01/24 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
2020/04/16 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
Python计算信息熵实例
2020/06/18 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
adidas美国官网:adidas US
2016/09/21 全球购物
关于应聘教师的自荐信
2016/01/28 职场文书
ipad隐藏软件app图标方法
2022/04/19 数码科技