力導(dǎo)向圖是D3里面一個(gè)比較酷炫的布局，我們只要定義好各個(gè)節(jié)點(diǎn)的信息及各個(gè)節(jié)點(diǎn)間的關(guān)系即可簡(jiǎ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) //指定連線長(zhǎng)度
        .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 截圖：

截圖