js折线树形图/拓扑图（组织机构图）

【实例简介】js折线树形图

【实例截图】

【核心代码】

var width = 500,
    height = 500;

var cluster = d3.layout.tree()
    .size([width, height - 200]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(40,0)");

d3.json("js/data.json", function(error, root) {
    var nodes = cluster.nodes(root);
    var links = cluster.links(nodes);
    var link = svg.selectAll(".link")
        .data(links)
        .enter()
        .append("path")
        .attr("class", "link")
        .attr("d", function(d){
            console.log(d);
//                debugger;
            return "M" (d.source.y 20) " " (d.source.x 15) 
                "L" (d.source.y 50) " " (d.source.x 15) 
                " L" (d.source.y 50) " " (d.target.x 15) " L" 
                (d.target.y-20) " " (d.target.x 15);

        })
        .attr("style",function(){
            return "stroke:#F7881F"
        });

    var node = svg.selectAll(".node")
        .data(nodes)
        .enter()
        .append("g")
        .attr("class", "node")
        .attr("transform", function(d) {
            return "translate("   d.y   ","   (d.x-10)   ")";
        });

    node.append("image")
        .attr("width",15)
        .attr("height",15)
        .attr("x",-7)
        .attr("y",5)
        .attr("xlink:href", function(d) {
            return (d.url?"img/"   d.url : '');
        });

    node.append("text")
        .attr("dx", function(d) {
            return 0;
        })
        .attr("dy", 30)
        .style("text-anchor", function(d) {
            return "middle";
        })
        .style("fill","#000")
        .text(function(d) { return d.name; });
});