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 相关文章推荐
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
Vue实现一个图片懒加载插件
Mar 11 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 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
PHP Pear 安装及使用
2009/03/19 PHP
ezSQL PHP数据库操作类库
2010/05/16 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
php建立Ftp连接的方法
2015/03/07 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
python写入中英文字符串到文件的方法
2015/05/06 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
python__new__内置静态方法使用解析
2020/01/07 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
python 爬虫请求模块requests详解
2020/12/04 Python
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
日语专业毕业生求职信
2013/12/04 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
质量保证书怎么写
2015/02/27 职场文书