D3.js：力導向圖

var nodes = [   { name: "桂林" }, { name: "廣州" },
                { name: "廈門" }, { name: "杭州" },
                { name: "上海" }, { name: "青島" },
                { name: "天津" }];

var edges = [   { source : 0 , target: 1 } , { source : 0 , target: 2 } ,
                { source : 0 , target: 3 } , { source : 1 , target: 4 } ,
                { source : 1 , target: 5 } , { source : 1 , target: 6 }];

var force = d3.layout.force()
    .nodes(nodes) //指定節點數組
    .links(edges) //指定連線數組
      .size([width,height]) //指定做用域範圍
      .linkDistance(150) //指定連線長度
      .charge([-400]); //相互之間的做用力
force.start();

//添加連線 
var svg_edges = svg.selectAll("line")
     .data(edges)
    .enter()
     .append("line")
     .style("stroke","#ccc")
     .style("stroke-width",1);

var color = d3.scale.category20();

//添加節點 
var svg_nodes = svg.selectAll("circle")
     .data(nodes)
     .enter()
    .append("circle")
    .attr("r",20)
    .style("fill",function(d,i){
      return color(i);
    })
    .call(force.drag);  //使得節點可以拖動

//添加描述節點的文字
var svg_texts = svg.selectAll("text")
     .data(nodes)
     .enter()
    .append("text")
    .style("fill", "black")
     .attr("dx", 20)
    .attr("dy", 8)
     .text(function(d){
        return d.name;
     });
force.on("tick", function(){ //對於每個時間間隔
//更新連線座標
svg_edges.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; });

//更新節點座標
svg_nodes.attr("cx",function(d){ return d.x; })
    .attr("cy",function(d){ return d.y; });

//更新文字座標
svg_texts.attr("x", function(d){ return d.x; })
   .attr("y", function(d){ return d.y; });
});

頁面效果: