d3 v4 collapsible tree

d3v4 collapsible tree

HTML

<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.15.0/lodash.min.js"></script>
<div id="network"></div>

CSS

.node--red {
    stroke: $status-red;
    fill: $status-red;
}

.node--amber {
    stroke: $status-amber;
    fill: $status-amber;
}

.node--green {
    stroke: $status-green;
    fill: $status-green;
}

.node {
    cursor: pointer;
}

.node circle {
    stroke-width: 1.5px;
}

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

.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
}

JavaScript

var network = {
        "id": "0001",
        "type": "donut",
        "name": "Cake",
        "ppu": 0.55,
        "batters": {
            "batter": [{
                    "id": "1001",
                    "type": "Regular"
                },
                {
                    "id": "1002",
                    "type": "Chocolate"
                },
                {
                    "id": "1003",
                    "type": "Blueberry"
                },
                {
                    "id": "1004",
                    "type": "Devil's Food"
                }
            ]
        },
        "topping": [{
                "id": "5001",
                "type": "None"
            },
            {
                "id": "5002",
                "type": "Glazed"
            },
            {
                "id": "5005",
                "type": "Sugar"
            },
            {
                "id": "5007",
                "type": "Powdered Sugar"
            },
            {
                "id": "5006",
                "type": "Chocolate with Sprinkles"
            },
            {
                "id": "5003",
                "type": "Chocolate"
            },
            {
                "id": "5004",
                "type": "Maple"
            }
        ]
    };

var margin = {top: 20, right: 120, bottom: 20, left: 120},
    width = 960 - margin.right - margin.left,
    height = 800 - margin.top - margin.bottom,
    i = 0,
    duration = 750;
   
   
       var ragToClass = function (status) {
            switch (status) {
            case 'U':
                return 'node--upcoming';
            case 'G':
                return 'node--green';
            case 'A':
                return 'node--amber';
            default:
                return 'node--red';
            }
        };



            var createTree;
            var connector = function (d) {
                return 'M' + d.x + ',' + d.y +
                    'C' + (d.x + d.parent.x) /...