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 =2000,
      height = 2000;
  var svg = d3.select("body").append("svg")
      .attr("width",width)
      .attr("height",height)
  var color = d3.scale.category20()
  //定义拖拽函数
  var drag = d3.behavior.drag()
      .on("drag",dragmove)
  function dragmove(d){
    d3.select(this)
        .attr("cx", d.cx = d3.event.x)
        .attr("cy", d.cy = d3.event.y)
  }
 
  //绘制圆形
  var circles =[{cx:150,cy:200,r:30},
    {cx:250,cy:200,r:30}]
  svg.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",color)
      .call(drag)
</script>
</body>
</html>

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

Javascript 相关文章推荐
让FireFox支持innerText的实现代码
Dec 01 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
jQuery Ajax使用实例
Apr 16 Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
d3.js实现图形缩放平移
Dec 19 #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
You might like
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
php 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
php计算年龄精准到年月日
2015/11/17 PHP
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
python自定义类并使用的方法
2015/05/07 Python
Python中datetime常用时间处理方法
2015/06/15 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
python爬虫爬取网页表格数据
2018/03/07 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
学python安装的软件总结
2019/10/12 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
flask框架中的cookie和session使用
2021/01/31 Python
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
美国最大网上鞋店:Zappos
2016/07/25 全球购物
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
医生自荐信
2013/10/11 职场文书
一份报关员的职业规划范文
2014/01/08 职场文书
矿泉水广告词
2014/03/20 职场文书
师范生自我鉴定
2014/03/20 职场文书
爱情保证书大全
2014/04/29 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
2014年质量工作总结
2014/11/22 职场文书
实名检举信范文
2015/03/02 职场文书
js作用域及作用域链工作引擎
2022/07/07 Javascript