Untitled

<!DOCTYPE html>
<html>

<head>
    <title>lv4</title>
    <meta charset="utf-8" />
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <style>
        .node circle {
            fill: #fff;
            stroke: steelblue;
            stroke-width: 1.5px;
        }

        .node {
            font: 10px sans-serif;
        }

        .link {
            fill: none;
            stroke: #ccc;
            stroke-width: 1.5px;
        }
    </style>
</head>

<body>
    <script>
        var data = {
            "name": "flare",
            "children": [
                {
                    "name": "analytics",
                    "children": [
                        {
                            "name": "cluster",
                            "children": [
                                { "name": "AgglomerativeCluster", "size": 3938 },
                                { "name": "CommunityStructure", "size": 3812 },
                                { "name": "MergeEdge", "size": 743 }
                            ]
                        },
                        {
                            "name": "graph",
                            "children": [
                                { "name": "BetweennessCentrality", "size": 3534 },
                                { "name": "LinkDistance", "size": 5731 }
                            ]
                        }
                    ]
                }
            ]
        };
        var width = 500;
        var height = 500;
        var cluster = d3.layout.cluster()
            .size([height, width - 160]);
        var diagonal = d3.svg.diagonal()
            .projection(function (d) { return [d.y, d.x]; });
        function nacrtaj() {
            var svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height)
                .append("g")
                .attr("transform", "translate(40,0)")
            var nodes = cluster.nodes(data),
                links = cluster.links(nodes);
            var link = svg.selectAll(".link")
                .data(links)
                .enter().append("path")
                .attr("class", "link")
                .attr("d", diagonal);
            var node = svg.selectAll(".node")
                .data(nodes)
                .enter().append("g")
                .attr("class", "node")
                .attr("transform", function (d) { return "translate(" + d.y + "," + d.x + ")"; })
            node.append("circle").attr("r", 4.5);

            node.append("text")
                .attr("dx", function (d) { return d.children ? -8 : 8; })
                .attr("dy", 3)
                .style("text-anchor", function (d) { return d.children ? "end" : "start"; })
                .text(function (d) { return d.name; });
            node.on("click", function (d) { collapse(d); });
        }
        function collapse(d) {
            if (d.children) {
                d._children = d.children;
                d.children = null;
            }
            else {
                d.children = d._children;
                d._children = null;
            }
            d3.select("svg").remove();
            nacrtaj(d);
        }
        nacrtaj();

    </script>
</body>

</html>