Collapsible Tree

SSG Collapsible Tree

by HYEONGJINKIM

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

CSS

.node {
    cursor: pointer;
}
.node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
}
.node text {
    font: 20px sans-serif;
}
.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
}

JavaScript

var jsonData = {
    "name": "Service",
    "children": [
        {
            "name": "SSG",
            "children": [
                {
                    "name": "lib",
                    "children": [
                        {
                            "name": "jquery-1.9.1.min.js",
                            "size": 3938
                        },
                        {
                            "name": "jquery.bxslider.min.js",
                            "size": 3812
                        },
                        {
                            "name": "jquery.tmpl.min.js",
                            "size": 6714
                        }
                    ]
                },
                {
                    "name": "ui",
                    "children": [
                        {
                            "name": "ui-boundScroll.js",
                            "size": 3534
                        },
                        {
                            "name": "ui-revealMenu.js",
                            "size": 5731
                        },
                        {
                            "name": "ui-roulette.js",
                            "size": 7840
                        },
                        {
                            "name": "ui.utility.js",
                            "size": 5914
                        },
                        {
                            "name": "ui.emitter.js",
                            "size": 3416
                        }
                    ]
                },
                {
                    "name": "model",
                    "children": [
                        {
                            "name": "model-brand.js",
                            "size": 7074
                        },
                        {
                            "name": "model-category.js",
                            "size": 7074
                        }
                    ]
          ...