<?php
$test_array = array(
    'name' => 'Costs',
    'children' => array(
        array(
            'name' => 'Deify',
            'children' => array(
                array('name' => 'Sub A1', 'children' => array(
                    array('name'=>'3rd level 1', 'size'=>4),
                    array('name'=>'3rd level 2', 'size'=>2)
                )),
                array('name' => 'Sub A1', 'children' => array(
                    array('name'=>'2rd level 1', 'size'=>4),
                    array('name'=>'2rd level 2', 'size'=>2)
                )),
                array('name' => 'Sub A2', 'size' => 8)
            )
        ),
        array(
            'name' => 'Topic B',
            'children' => array(
                array('name' => 'Sub B1', 'size' => 3),
                array('name' => 'Sub B2', 'size' => 3),
                array('name' => 'Sub B2', 'size' => 3),
                array('name' => 'Sub B3', 'size' => 3))
        ),
        array(
            'name' => 'Topic C',
            'children' => array(
                array('name' => 'Sub A1', 'size' => 4),
                array('name' => 'Sub A2', 'size' => 4)
            )
        ),
    )
);

$output = json_encode($test_array);
?>

<svg></svg>
<script>
    // JSON data
    var nodeData = <?php echo $output ?>;

    // Variables
    var width = 500;
    var height = 500;
    var radius = Math.min(width, height) / 2;
    var color = d3.scaleOrdinal(d3.schemeCategory20b);

    // Create primary <g> element
    var g = d3.select('svg')
            .attr('width', width)
            .attr('height', height)
            .append('g')
            .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');

    // Data strucure
    var partition = d3.partition()
            .size([2 * Math.PI, radius]);

    // Find data root
    var root = d3.hierarchy(nodeData)
            .sum(function (d) {
                return d.size
            });


    // Size arcs
    partition(root);
    
    console.log(root);
    var arc = d3.arc()
            .startAngle(function (d) {
                console.log(d)
                return d.x0
            })
            .endAngle(function (d) {
                return d.x1
            })
            .innerRadius(function (d) {
                return d.y0
            })
            .outerRadius(function (d) {
                return d.y1
            });

    // Put it all together
    g.selectAll('path')
            .data(root.descendants())
            .enter().append('path')
            .attr("display", function (d) {
                return d.depth ? null : "none";
            })
            .attr("d", arc)
            .style('stroke', '#fff')
            .style("fill", function (d) {
                return color((d.children ? d : d.parent).data.name);
            });
</script>
