D3.js学习笔记(7)--写个力导向图

力导向图是D3里面一个比较酷炫的布局，我们只要定义好各个节点的信息及各个节点间的关系即可简历一个力导向图。
PS：重要的事情说N遍
D3提供的布局只提供生成布局的必要数据，不会直接绘图
D3提供的布局只提供生成布局的必要数据，不会直接绘图
D3提供的布局只提供生成布局的必要数据，不会直接绘图
...

数据：

var testData = {
        "node":[
            {
                "id":"123456487",
                "name":"厦门",
                "type":"1"
            },
            {
                "id":"1234fg56487",
                "name":"思明区",
                "type":"2"
            },
            {
                "id":"1234sssa56487",
                "name":"集美区",
                "type":"2"
            },
            {
                "id":"1234ddd56487",
                "name":"湖里区",
                "type":"2"
            },
            {
                "id":"123gg456487",
                "name":"海沧区",
                "type":"2"
            },
            {
                "id":"12345f6487",
                "name":"同安区",
                "type":"2"
            },
            {
                "id":"12345asdf6487",
                "name":"翔安区",
                "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; //画布规格
    var color = d3.scale.category20(); //颜色标尺
    var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

    var Nodes = [],tempNodesIndex = []; //新的节点数组及id数组
    for(var j=0;j

以上例子用D3库为：D3【http://d3js.org/d3.v3.min.js】

Demo 截图：

截图