關於力導向圖
今天自己寫了一個力導向圖，也算花了大半天時間才搞定細節東西。修改了一些bug，如下：
1、只出現一個點，因為function(d){return d.target.id;})沒有定義id屬性，所以只出現一個。
2、attr("class","node")，寫錯：attr("attr",".node")
3、關於節點整理，從json裡面讀取的是一個物件--一個節點，要將裡面每一個子節點都定義出來。flatten(root)
4、定義force，繫結node\link，然後通過node\link畫圖
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="nodeStyle.css">
</head>
<body>
<script type="text/javascript" src="d3/d3.js"></script>
<script src="d3/d3.min.js"></script>
<script>
var width=800,
height=800,
root;
var svg=d3.select("body").append("svg").attr("width",width).attr("height",height);
var link=svg.selectAll(".link");
var node=svg.selectAll(".node");
var force= d3.layout.force()
.linkDistance(80)
.charge(-120)
.gravity(.05)
.size([width, height])
.on("tick", tick);
d3.json("test.json",function(error,json){
if(error) throw error;
root=json;
update();
});
function update(){
var nodes=flatten(root),
links=d3.layout.tree().links(nodes);
force.nodes(nodes)
.links(links).start();
link=link.data(links,function(d){return d.target.id;});
link.enter().insert("line",".node")//??不懂
.attr("class","link");
node=node.data(nodes,function(d){return d.id;});
node.exit().remove();
var nodeEnter=node.enter().append("g")
.attr("class","node");
nodeEnter.append("circle")
.attr("r",function(d){return Math.sqrt(d.size) / 10 || 4.5;})
.call(force.drag);
//.attr("cx",function(d){return d.x;})
// .attr("cy",function(d){return d.y;});
nodeEnter.append("text")
.text(function(d) { return d.name; });
}
function flatten(root){
//給node標記id
var nodes=[],i=0;
function recurse(node){
if(node.children) node.children.forEach(recurse);
if(!node.id) node.id=++i;
nodes.push(node);
}
recurse(root);
console.log(nodes);
return nodes;
}
function tick(){
link.attr("x1",function(d){return d.source.x;})
.attr("y1",function(d){return d.source.y;})
.attr("x2",function(d){return d.target.x;})
.attr("y2",function(d){return d.target.y;});
//node.attr("cx",function(d){return d.x;})
// .attr("cy",function(d){return d.y;});
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}
</script>
</body>