力導(dǎo)向圖是D3里面一個(gè)比較酷炫的布局窿吩，我們只要定義好各個(gè)節(jié)點(diǎn)的信息及各個(gè)節(jié)點(diǎn)間的關(guān)系即可簡歷一個(gè)力導(dǎo)向圖压怠。
PS：重要的事情說N遍
D3提供的布局只提供生成布局的必要數(shù)據(jù)，不會(huì)直接繪圖
D3提供的布局只提供生成布局的必要數(shù)據(jù)，不會(huì)直接繪圖
D3提供的布局只提供生成布局的必要數(shù)據(jù)，不會(huì)直接繪圖
...
數(shù)據(jù)：
var testData = {
"node":[
{
"id":"123456487",
"name":"廈門",
"type":"1"
},
{
"id":"1234fg56487",
"name":"思明區(qū)",
"type":"2"
},
{
"id":"1234sssa56487",
"name":"集美區(qū)",
"type":"2"
},
{
"id":"1234ddd56487",
"name":"湖里區(qū)",
"type":"2"
},
{
"id":"123gg456487",
"name":"海滄區(qū)",
"type":"2"
},
{
"id":"12345f6487",
"name":"同安區(qū)",
"type":"2"
},
{
"id":"12345asdf6487",
"name":"翔安區(qū)",
"type":"2"
}
],
"links":[
{
"source":"123456487",
"target":"1234fg56487",
"relation":"從屬"
},
{
"source":"123456487",
"target":"1234sssa56487",
"relation":"從屬"
},
{
"source":"123456487",
"target":"1234ddd56487",
"relation":"從屬"
},
{
"source":"123456487",
"target":"123gg456487",
"relation":"從屬"
},
{
"source":"123456487",
"target":"12345f6487",
"relation":"從屬"
},
{
"source":"123456487",
"target":"12345asdf6487",
"relation":"從屬"
},
{
"source":"12345f6487",
"target":"12345asdf6487",
"relation":"兄弟"
}
]
};
邏輯代碼
var height = 500,width=600; //畫布規(guī)格
var color = d3.scale.category20(); //顏色標(biāo)尺
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var Nodes = [],tempNodesIndex = []; //新的節(jié)點(diǎn)數(shù)組及id數(shù)組
for(var j=0;j<testData.node.length;j++){
Nodes[Nodes.length]={
"id":testData.node[j].id,
"name":testData.node[j].name,
"type":testData.node[j].type
};
tempNodesIndex[tempNodesIndex.length] = testData.node[j].id;
}
//console.log(tempNodesIndex);
//重新映射關(guān)系
var Links = [];
for(var i=0; i<testData.links.length; i++){
Links[Links.length] = {
"source":tempNodesIndex.indexOf(testData.links[i].source),
"target":tempNodesIndex.indexOf(testData.links[i].target),
"relation":testData.links[i].relation
};
}
//console.log(links)
var force = d3.layout.force()
.nodes(Nodes)
.links(Links)
.size([width,height])//指定作用域范圍
.linkDistance(150) //指定連線長度
.charge([-800]); //作用力
//上面的布局方法注入數(shù)據(jù)后獲取必要的數(shù)據(jù)（定位逮矛、權(quán)重等）
/*布局不會(huì)生成圖，而是提供生成圖的必要數(shù)據(jù)*/
force.start();
// console.log(nodes)
// console.log(links)
//添加連線
var _lines = svg.selectAll('line')
.data(Links)
.enter()
.append('line')
.style('stroke-width',1)
.style('stroke',"#ccc")
//添加節(jié)點(diǎn)
var _nodes = svg.selectAll('circle')
.data(Nodes)
.enter()
.append('circle')
.attr('r',function(d){
return d.type==1?30:20;
})
.style('fill',function(d){
return color(d.type);
})
.call(force.drag); //調(diào)用drag方法使圖形可拖動(dòng)
//描述文字
var _texts = svg.selectAll('.nodeName')
.data(Nodes)
.enter()
.append('text')
.attr('class','nodeName')
.style('fill','block')
.attr('dx',function(d){
return d.type==1?30:20;
})
.attr('dy',8)
.text(function(d){
return d.name;
})
//更新圖形的每一幀
force.on('tick',function(){
//更新連線坐標(biāo)
_lines.attr("x1",function(d){
console.log(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; });
//更新節(jié)點(diǎn)坐標(biāo)
_nodes.attr("cx",function(d){ return d.x; })
.attr("cy",function(d){ return d.y; });
//更新文字坐標(biāo)
_texts.attr("x", function(d){ return d.x; })
.attr("y", function(d){ return d.y; });
});
以上例子用D3庫為：D3【http://d3js.org/d3.v3.min.js】
Demo 截圖：
截圖
