D3 - Tree - Flat Data to Hierarchy Data

SEE BIZAMAJIG EQUIVALENT EXAMPLE - http://codepen.io/bizamajig/pen/NbYBzw SEE - https://bl.ocks.org/d3noob/43a860bc0024792f8803bba8ca0d5ecd

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>

CSS

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 3px;
}

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

.node--internal text {
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}

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

JavaScript

// the flat data
var flatData = [
  {"row_id": "111", "ou_name": "Company", "parent": null}, 
  {"row_id": "112", "ou_name": "Sawmill #1", "parent": "111" },
  {"row_id": "113", "ou_name": "Home Office", "parent": "111" },
  {"row_id": "114", "ou_name": "Marketing", "parent": "112" },
  {"row_id": "115", "ou_name": "Marketing", "parent": "113" },
  {"row_id": "116", "ou_name": "Sales", "parent": "112" },
  {"row_id": "117", "ou_name": "Customer Support", "parent": "112" },
  {"row_id": "118", "ou_name": "Accounting", "parent": "112" },
  {"row_id": "119", "ou_name": "User 11", "parent": "114" },
  {"row_id": "120", "ou_name": "User 1", "parent": "115" },
  {"row_id": "121", "ou_name": "User 2", "parent": "115" },
  {"row_id": "122", "ou_name": "User 3", "parent": "118" },
  {"row_id": "123", "ou_name": "User 4", "parent": "118" },
  {"row_id": "124", "ou_name": "User 5", "parent": "118" },
  {"row_id": "125", "ou_name": "User 6", "parent": "118" },
  {"row_id": "126", "ou_name": "User 7", "parent": "118" },
  {"row_id": "127", "ou_name": "User 8", "parent": "118" },
  {"row_id": "128", "ou_name": "User 9", "parent": "118" },
  {"row_id": "129", "ou_name": "User 10", "parent": "118" },
  {"row_id": "119", "ou_name": "User 12", "parent": "114" }
];

// convert the flat data into a hierarchy 
var treeData =  {
  "name": "A1",
  "children": [
    {
      "name": "B1",
      "children": [
        {
          "name": "C1",
          "value": 100
        },
        {
          "name": "C2",
          "value": 300
        },
        {
          "name": "C3",
          "value": 200
        }
      ]
    },
    {
      "name": "B2",
      "value": 200
    }
  ]
}

// assign the name to each node
treeData.each( function( d ) {
	console.log( d, d.id, d.name );
//d.name = d.id;
	d.name = d.name;
});

// Creates a curved (diagonal) path from parent to the child nodes
var bizamajig__bind__tree__diagonal = function( s, d ) {
      path = `M ${s.y} ${s.x}
              C ${(s.y +...