编程 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 =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>

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

d3.js实现图形拖拽

- Author -

AryaoO

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

Javascript 相关文章推荐

js wmp操作代码小结(音乐连播功能)

Nov 08 Javascript

eval与window.eval的差别分析

Mar 17 Javascript

ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)

Jan 13 Javascript

处理文本部分内容的TextRange对象应用实例

Jul 29 Javascript

jQuery寻找n以内完全数的方法

Jun 24 Javascript

JS两种类型的表单提交方法实例分析

Nov 28 Javascript

vue.js指令v-model使用方法

Mar 20 Javascript

JS实现电商放大镜效果

Aug 24 Javascript

vue axios 简单封装以及思考

Oct 09 Javascript

js防抖和节流的深入讲解

Dec 06 Javascript

vue.js的状态管理vuex中store的使用详解

Nov 08 Javascript

vue css 相对路径导入问题级踩坑记录

Jun 05 Vue.js

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