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": 3083,
    "title": "Some test data 3083",
    "alignedToObjectiveId": 3044,
    "cachedRAG": "G",
    "noChildren": 25,
    "children": [
        {
            "id": 2921,
            "title": "Some test data 2921",
            "alignedToObjectiveId": 3083,
            "cachedRAG": "G",
            "children": [
                {
                    "id": 4826,
                    "title": "Some test data 4826",
                    "alignedToObjectiveId": 2921,
                    "cachedRAG": "G"
                }
            ]
        },
        {
            "id": 3224,
            "title": "Some test data 3224",
            "alignedToObjectiveId": 3083,
            "cachedRAG": "G"
        },
        {
            "id": 3223,
            "title": "Some test data 3223",
            "alignedToObjectiveId": 3083,
            "cachedRAG": "G",
            "children": [
                {
                    "id": 3852,
                    "title": "Some test data 3852",
                    "alignedToObjectiveId": 3223,
                    "cachedRAG": "G"
                },
                {
                    "id": 3309,
                    "title": "Some test data 3309",
                    "alignedToObjectiveId": 3223,
                    "cachedRAG": "G"
                },
                {
                    "id": 3305,
                    "title": "Some test data 3305",
                    "alignedToObjectiveId": 3223,
                    "cachedRAG": "G"
                },
                {
                    "id": 3315,
                    "title": "Some test data 3315",
                    "alignedToObjectiveId": 3223,
                    "cachedRAG": "G"
                },
                {
                    "id": 3311,
                    "title": "Some test data 3311",
                    "alignedToObjectiveId": 3223,
                    "cachedRAG": "R"
                },
                {
                    "id":...