编程 Javascript

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>

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

d3.js实现图形缩放平移

- Author -

AryaoO

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery Ajax之$.get()方法和$.post()方法

Oct 12 Javascript

JavaScript Timer实现代码

Feb 17 Javascript

JQuery中对Select的option项的添加、删除、取值

Aug 25 Javascript

JS实现鼠标箭头变成一个燃烧烛光效果的方法

Feb 28 Javascript

原生js与jQuery实现简单的tab切换特效对比

Jul 30 Javascript

JS实现下拉菜单赋值到文本框的方法

Aug 18 Javascript

JS中递归函数

Jun 17 Javascript

AngularJS入门教程之双向绑定详解

Aug 18 Javascript

JS使用Date对象实时显示当前系统时间简单示例

Aug 23 Javascript

JavaScript常见事件对象与操作实例总结

Jan 05 Javascript

vue+Element实现搜索关键字高亮功能

May 28 Javascript

微信小程序函数防抖解决重复点击消耗性能问题实现代码

Sep 12 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