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 相关文章推荐
javascript修改表格背景色实例代码分享
Dec 10 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
使用jquery+CSS实现控制打印样式
Dec 31 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
原生js实现3D轮播图
Mar 21 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 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
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
两款万能的php分页类
2015/11/12 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
PHP调用其他文件中的类
2018/04/02 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
google地图的路线实现代码
2009/08/20 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
js获取微信版本号的方法
2015/05/12 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
微信小程序slider组件使用详解
2018/01/31 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
Python中使用logging模块打印log日志详解
2015/04/05 Python
详解django自定义中间件处理
2018/11/21 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
python实现画循环圆
2019/11/23 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
酒店副总岗位职责
2013/12/24 职场文书
硕士研究生自我鉴定范文
2013/12/27 职场文书
2014全国两会学习心得体会1000字
2014/03/10 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
读书笔记怎么写
2015/07/01 职场文书
小学语文教师研修日志
2015/11/13 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP