$(document).ready(function() {
//获取元素
var oChart = $("#chart");

console.log("Js文件工作");
//数据
var nodes = [
    { name: "阿里巴巴", type: "R" },
    { name: "1-1", type: "B" },
    { name: "1-1-1", type: "C" },
    { name: "1-1-2", type: "C" },
    { name: "1-1-3", type: "C" },
    { name: "1-1-4", type: "C" },
    { name: "1-1-5", type: "C" },
    { name: "1-2", type: "B" },
    { name: "1-2-1", type: "C" },
    { name: "1-2-2", type: "C" },
    { name: "1-2-3", type: "C" },
    { name: "1-2-4", type: "C" },
    { name: "x", type: "C" }

];

var edges = [

    { source: 0, target: 1 },
    { source: 1, target: 2 },
    { source: 1, target: 3 },
    { source: 1, target: 4 },
    { source: 1, target: 5 },
    { source: 1, target: 6 },
    { source: 0, target: 7 },
    { source: 7, target: 8 },
    { source: 7, target: 9 },
    { source: 7, target: 10 },
    { source: 7, target: 11 },

    { source: 12, target: 1 },
    { source: 12, target: 11 }
];

var width = 645;
var height = 645;


var svg = d3.select(oChart[0])
    .append("svg")
    .attr("width", width)
    .attr("height", height);

var myForce = d3.layout.force()
    .nodes(nodes) //指定节点数组
    .links(edges) //指定连线数组
    .size([width, height]) //指定范围
    .linkDistance(200) //指定连线长度
    .charge(-400); //相互之间的作用力

myForce.start(); //开始作用

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

//＊＊＊＊＊＊＊＊＊＊添加连线＊＊＊＊＊＊＊＊＊＊      
var svg_edges = svg.selectAll("line")
    .data(edges)
    .enter()
    .append("line")
    .style("stroke", "#dcd6d9")
    .style("stroke-width", 3);

var myColor = d3.scale.category10();

//＊＊＊＊＊＊＊＊＊＊添加节点＊＊＊＊＊＊＊＊＊＊          
var svg_nodes = svg.selectAll("circle")
    .data(nodes)
    .enter()
    .append("circle")
    .attr("r", 12)
    .attr("class", "nodes-class")
    .style("fill", function(d, i) {

        if (d.type == "R") {


            console.log(d.name);

            return myColor(3);

        } else if (d.type == "B") {

            console.log(d.name);
            return myColor(2);

        } else if (d.type == "C") {

            console.log(d.name);
            return myColor(1);
        }





        //console.log(myForce.nodes([0]));
        //console.log(myForce.nodes().linkDistance);
        //console.log(nodes[0].name);

    })
    .call(myForce.drag); //使得节点能够拖动




//＊＊＊＊＊＊＊＊＊＊添加描述节点的文字＊＊＊＊＊＊＊＊＊＊
var svg_texts = svg.selectAll("text")
    .data(nodes)
    .enter()
    .append("text")
    .style("fill", "black")
    .attr("dx", 10)
    .attr("dy", 8)
    .text(function(d) {
        return d.name;
    });



//＊＊＊＊＊＊＊＊＊＊对于每一个时间间隔＊＊＊＊＊＊＊＊＊＊
myForce.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;
        });
});
});