D3 Tree Diagram

by kelvinau

CSS

.node circle {
  fill: #fff;
}

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

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

JavaScript

var treeData = {
  "name": "2nd-FW",
  "value": 50,
  "children": [{
      "name": "Thomas L",
      "value": 100,
      "children": [{
          "name": "FortiClient-1",
          "value": 40,
        },
        {
          "name": "FortiClient-3",
          "value": 40,
        }
      ]
    },
    {
      "name": "David D.",
      "value": 30,
      "children": [{
          "name": "FortiClient-5",
          "value": 8,
        },
        {
          "name": "FortiClient-10",
          "value": 17,
        }
      ]
    },
    {
      "name": "Faker",
      "value": 30,
      "children": [{
        "name": "Faker Computer",
        "value": 30,
      }, ]
    },
    {
      "name": "Linsss",
      "value": 50,
      "children": [{
          "name": "Computer",
          "value": 30,
        },
        {
          "name": "Computer 3000",
          "value": 20,
        },
      ]
    },
    {
      "name": "kernver",
      "value": 30,
      "children": [{
        "name": "Linux Ubuntu",
        "value": 30,
      }, ]
    },
    {
      "name": "Paul Laureen",
      "value": 30,
      "children": [{
        "name": "Com 1",
        "value": 30,
      }, ]
    },
    {
      "name": "jpmok",
      "value": 30,
      "children": [{
          "name": "My Computer",
          "value": 15,
        },
        {
          "name": "My Computer 2",
          "value": 15,
        },
      ]
    },
    {
      "name": "Esxis linami",
      "value": 30,
      "children": [{
        "name": "E-Com",
        "value": 30,
      }, ]
    },
  ]
};

// Set the dimensions and margins of the diagram
var margin = {
    top: 200,
    right: 90,
    bottom: 30,
    left: 150
  },
  width = 1500 - margin.left - margin.right,
  height = 1500 - margin.top - margin.bottom;

// append the svg object to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
  .attr("width", width +...