Collapsible Tree

SSG Collapsible Tree

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": "Root",
    "children": [
        {
            "name": "01.ssg",
            "children": [
                {
                    "name": "mobile",
                    "children": [
                        {
                            "name": "trunk",
                    		"children": [
                    			{
                    				"name": "js",
		                    		"children": [
	                    				{
				                            "name": "lib",
				                            "size": 100
				                        },
				                        {
				                            "name": "ui",
				                            "size": 200
				                        },
				                        {
				                            "name": "ui-renew",
				                            "size": 300
				                        }
		                    		]
                    			}
                    		]
                        }
                    ]
                },
                {
                    "name": "pcweb",
                    "children": [
                        {
                            "name": "trunk",
                    		"children": [
                    			{
                    				"name": "js",
		                    		"children": [
	                    				{
				                            "name": "lib",
				                            "size": 3534
				                        },
				                        {
				                            "name": "ui",
				                            "size": 5731
				                        }
		                    		]
                    			}
                    		]
                        }
                    ]
                }
            ]
        },
        {
            "name": "02.emart",
            "children": [
                {
                    "name": "Easing",
                    "size": 17010
                },
                {
                   ...