d3力导向图demo技能实现
all code:
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
<script src="js/d3.v3.js"></script>
<script>
var nodes = [
{ name: "GuiLin"},
{ name: "GuangZhou" },
{ name: "XiaMen" },
{ name: "HangZhou" },
{ name: "ShangHai" },
{ name: "QingDao" },
{ name: "TianJin" },
{ name: "BeiJing" },
{ name: "ChangChun" },
{ name: "XiAn" },
{ name: "WuluMuQi" },
{ name: "LaSa" },
{ name: "ChengDu" }
];
var edges = [
{ source : 0 , target: 1 } ,
{ source : 0 , target: 2 } ,
{ source : 0 , target: 3 } ,
{ source : 0 , target: 4 } ,
{ source : 0 , target: 5 } ,
{ source : 0 , target: 6 } ,
{ source : 0 , target: 7 } ,
{ source : 0 , target: 8 } ,
{ source : 0 , target: 9 } ,
{ source : 0 , target: 10 } ,
{ source : 0 , target: 11 } ,
{ source : 0 , target: 12 }
];
var width =1000;
var height = 600;
// var bord= "1px solid red";
// console.log(edges);
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height);
var force = d3.layout.force()
.nodes(nodes)
.links(edges)
.size([width,height])
.linkDistance(200)
.charge([-100])
.start();
var color = d3.scale.category20();
var svg_edges = svg.selectAll("path.line")
.data(edges)
.enter()
.append("path")
.style("stroke",function(d,i){
return color(i+1);
})
.attr("class","line")
.attr("id",function(d,i){return "line"+i})
.style("stroke-width",1);
var svg_mark=svg.selectAll("circle.mark")
.data(edges)
.enter()
.append("circle")
.attr("r",12)
.attr("class","mark")
.style("fill",function(d,i){
return color(i+1);
})
//var mark_path=svg_mark.append("animateMotion").attr("dur","3s").attr("begin","0s").attr("repeatCount","indefinite");
var mpath=svg_mark.append("animateMotion").attr("path",function(d){
return "M0,0L"+(d.target.x-d.source.x)+","+ (d.target.y-d.source.y);
// return "M"+d.source.x+","+ d.source.y+"L"+d.target.x+","+ d.target.y;
}).attr("dur","3s").attr("begin","0s").attr("repeatCount","indefinite");//.append("mpath").attr("xlink:href",function(d,i){return "#line"+i});
var svg_nodes = svg.selectAll("circle.node")
.data(nodes)
.enter()
.append("circle")
.attr("r",10)
.attr("class","node")
.style("fill",function(d,i){
return color(i);
})
.call(force.drag);
force.on("tick", function(){
/*svg_mark.attr("cx",function(d){ return d.source.x; });
svg_mark.attr("cy",function(d){ return d.source.y; });
*/
svg_mark.attr("transform", function(d) {
return "translate(" + d.source.x+ "," +d.source.y+ ")";
});
mpath.attr("path",function(d){
return "M0,0L"+(d.target.x-d.source.x)+","+ (d.target.y-d.source.y);
})
/*mark_path.attr("path",function(d){
return "M "+d.source.x+" "+ d.source.y+" "+"L "+d.target.x+" "+d.target.y
})*/
svg_edges.attr("d",function(d){
return "M "+d.source.x+" "+ d.source.y+" "+"L "+d.target.x+" "+d.target.y
})
/*svg_edges.attr("x1",function(d){ return d.source.x; });
svg_edges.attr("y1",function(d){ return d.source.y; });
svg_edges.attr("x2",function(d){ return d.target.x; });
svg_edges.attr("y2",function(d){ return d.target.y; });
*/
svg_nodes.attr("cx",function(d){ return d.x; });
svg_nodes.attr("cy",function(d){ return d.y; });
});
</script>