d3.js——图形拖拽操作
2016-05-10 09:55
731 查看
<!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>
相关文章推荐
- 用js判断请求终端或者浏览器
- JavaScript实现图片预加载,自适应指定尺寸容器
- pc端qq登录集成(js方式)新手推荐
- html5 js跨域
- 常规功能和模块自定义系统 (cfcmms)—041模块附加字段和新的Grid方案设计器
- ELK-json型日志-特殊字段出现ERROR 字段报警配置文件
- cojs EX_香蕉 题解报告
- 全国城市二级联动js插件
- MyEclips中JS代码提示插件(spket)
- 如何快速学习正则表达式
- 编程题:1. var person = '{name:"Lily",sex:"famale",age:24,country:"US"}';将person转换成JSON对象并便利每个属性值。
- [转]ExtJs基础--Html DOM、Ext Element及Component三者之间的区别
- js中需注意的编程细节
- jsp页面常用控件
- javascript自动适应的iframe高度
- JSP/Servlet程序设计(入门书籍)
- json 解析
- JS alert()、confirm()、prompt()的区别
- js事件冒泡
- 深入了解JavaScript中的关键字