d3.drawForceGraph = function ()
    {
        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 width = 800;
        var height = 400;

        if (svg == undefined)
        {
            svg = d3.select("body")
                .append("svg")
                .attr("width", width)
                .attr("height", height);
        }

        //=================建立力導向圖生成器========================
        var force = d3.layout.force()
            .nodes(nodes)		//指定節點陣列
            .links(edges)		//指定連線陣列
            .size([width, height])	//指定範圍
            .linkDistance(100)	//指定連線長度
            .charge(-800);	//相互之間的作用力(表示了節點間的分散程度)

        force.start();	//開始作用

        console.log(nodes);
        console.log(edges);
        console.log(d3.version);

        var edgeGroup = svg.append("g");
        var svg_edges = edgeGroup.selectAll("#glines")
            .data(edges)
            .enter()
            .append("line")
            .style("stroke", "#ccc")
            .style("stroke-width", 3)
            .attr("id", function (d, i) {
                return "glines" + parseInt(i);
            });
        edgeGroup.attr("transform", "translate(" + 500 + "," + "20" + ")");
        //var edgeGroup
        //.call(force.drag);
        var color = d3.scale.category20();

        //新增節點
        var nodeGroup = svg.append("g");
        var svg_nodes = nodeGroup.selectAll("#circles")
            .data(nodes)
            .enter()
            .append("circle")
            .attr("r", 12)
            .style("fill", function (d, i) {
                return color(i);
            })
            .attr("id", function (d, i) {
                return "circles" + parseInt(i);
            })
            .call(force.drag);              	//使得節點能夠拖動


        nodeGroup.attr("transform", "translate(" + 500 + "," + "20" + ")");

        //新增描述節點的文字
        var textGroup = svg.append("g");

        var svg_texts = textGroup.selectAll("#texts")
            .data(nodes)
            .enter()
            .append("text")
            .style("fill", "black")
            .attr("dx", 20)
            .attr("dy", 8)
            .attr("id", function (d, i) {
                return "texts" + parseInt(i);
            })
            .text(function (d) {
                return d.name;
            }).call(force.drag);

        textGroup.attr("transform", "translate(" + 500 + "," + "20" + ")");

        //=========================不實現該事件函式，所有的點、線將聚合成一團=========================
        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; });
        });
        

    }