d3 tree click centre - smooth transition

Render a tree, listen to click events and centre where clicked

by Nivaldo

HTML

<div id="map_holder"></div>

CSS

path.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
}
text {
    font: 14px sans-serif;
    cursor:pointer;
}

circle {
     cursor: pointer;   
}
}

JavaScript

var json_data = {
    "id": 1,
        "name": "CollaboTree",
        "size": 73,
        "children": [{
        "id": 7,
            "name": "Development",
            "size": 11,
            "children": [{
            "id": 8,
                "name": "Git?",
                "size": 0,
                "children": []
        }, {
            "id": 17,
                "name": "Points",
                "size": 0,
                "children": []
        }, {
            "id": 18,
                "name": "Activity",
                "size": 0,
                "children": []
        }, {
            "id": 104,
                "name": "Profiles",
                "size": 0,
                "children": []
        }, {
            "id": 114,
                "name": "Drop Box",
                "size": 0,
                "children": []
        }]
    }, {
        "id": 23,
            "name": "Concept",
            "size": 12,
            "children": [{
            "id": 81,
                "name": "Lifecycle",
                "size": 2,
                "children": []
        }, {
            "id": 99,
                "name": "Similar sites",
                "size": 0,
                "children": []
        }, {
            "id": 100,
                "name": "Closed projects",
                "size": 1,
                "children": []
        }]
    }, {
        "id": 3,
            "name": "Design",
            "size": 27,
            "children": [{
            "id": 4,
                "name": "Logo",
                "size": 4,
                "children": [{
                "id": 16,
                    "name": "Tree?",
                    "size": 1,
                    "children": []
            }]
        }, {
            "id": 12,
                "name": "Site Theme",
                "size": 1,
                "children": []
        }, {
            "id": 15,
                "name": "UX",
                "size": 10,
                "children": [{
                "id": 29,
...