1、第一步，引入D3.JS库，创建一个SVG对象，代码如下：
<div style="padding:50;background-color:gray;"></div>
<script type="text/javascript" src="d3/d3.js"></script
<script>
var width = 500;
var height = 350;
var svg = d3.select("div").append("svg").style("background-color", "y
ellow").attr("width", width).attr("height", height);
2、第二步，定义创建的数据，代码：
var circles = [{cx:150, cy:200, r:30},{cx:250, cy:200, r:30}]
3、第三步，创建一个回调函数，这就是用于drag的，代码：
var drag = d3.drag().on("start", function(d){
console.log("start");
}).on("end", function(d){
console.log("end");
}).on("drag", function(d){
d3.select(this).attr("cx", d.cx = d3.event.x)attr("cy", d.cy =
d3.event.y); });
4、第四步，初始化SVG图形，动态画出图形，代码：
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", "black")
.call(drag);
5、第五步，下面贴出所有代码：如图
6、在这里要注意，D3版本的区别，最新版的是V4版，相对以前修改了很多方法，所以，要是上面代码有什么不对，先看一下版本，本经验是V4版的
