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的时候写的学习笔记
Dec 30 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 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操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Python实现的数据结构与算法之队列详解
2015/04/22 Python
Python设计模式之代理模式简单示例
2018/01/09 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
OpenCV 模板匹配
2019/07/10 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
大学生饮食连锁店创业计划书
2014/01/17 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
护理专业自我评价
2015/03/11 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏