<?php 
 
 
include_once '../d3.classes.inc.php';
 
$radius = d3::variable(960 / 2, "radius")->linebreak();;
 
stack()->add($radius);
 
 
$cluster = d3()->layout->cluster()
 
    ->linebreak()->tab(2)
 
    ->size(array(360, d3::unescape($radius->getVar(), " - ", 120)))
 
    ->createVar("cluster")
 
    ->linebreak();
 
stack()->add($cluster);
 
 
$diagonal = d3()->svg->diagonal->radial()->linebreak()->tab(2)
 
    ->projection(function($d){return array( $d->y, $d->x / 180 * Math()->PI );})
 
    ->createVar("diagonal")
 
    ->linebreak();
 
stack()->add($diagonal);
 
 
$vis = d3()->select("#chart")
 
    ->append("svg")
 
    ->linebreak()->tab(2)
 
        ->attr("width", d3::concat($radius->getVar(),'*',2))
 
        ->linebreak()->tab(2)
 
        ->attr("height", d3::concat($radius->getVar(),'*',2))
 
        ->linebreak()->tab()
 
    ->append("g")
 
        ->linebreak()->tab(2)
 
        ->attr("transform", d3::unescape('"translate("+radius+","+radius+")"'))
 
    ->createVar("vis")
 
    ->linebreak();
 
 
stack()->add($vis);
 
stack()->add(PHP_EOL);
 
 
 
$f = f3("json");
 
 
#$f->add(d3::unescape("console.log(json);"));
 
$nodes = $cluster->get()->nodes($f->getVar("json"))->createVar("nodes");
 
$link  = $vis->get()->selectAll("path.link")
 
            ->linebreak()->tab()
 
                ->data($cluster->get()->links($nodes->getVar()))
 
                ->linebreak()->tab(2)
 
                    ->enter()->append("path")
 
                ->linebreak()->tab(2)
 
                    ->attr("class", "link")
 
                    ->attr("d", $diagonal->getVar())
 
        ->createVar("link");
 
 
$node = $vis->get()->selectAll("g.node")
 
        ->linebreak()->tab()
 
        ->data($nodes->getVar())
 
        ->linebreak()->tab()
 
        ->enter()->append("g")
 
        ->linebreak()->tab(2)
 
        ->attr("class", "node")
 
        ->linebreak()->tab(2)
 
        ->attr("transform", function($d){return "rotate(".($d->x - 90) . ") translate (". $d->y .")";})
 
        ->createVar("node")->linebreak();
 
        
 
$node1 = $node->get()->append("circle")->attr("r", 4.5);
 
$node2 = $node->get()->append("text")
 
        ->linebreak()->tab(2)
 
        ->attr("dy", ".31em")
 
        ->linebreak()->tab(2)
 
        ->attr("text-anchor", function($d){return $d->x<180?"start":"end";})
 
        ->linebreak()->tab(2)
 
        ->attr("transform", function($d){return $d->x<180?"translate(8)":"rotate(180)translate(-8)";})
 
        ->linebreak()->tab(2)
 
        ->text(function($d){return $d->name;})
 
;
 
 
$f->add($nodes);
 
$f->add($link);
 
$f->add($node);
 
$f->add($node1->colon());
 
$f->add($node2->colon());
 
 
$load = d3()->json("data/flare.json", $f);
 
 
$timeout = d3::setTimeout($load, 800);
 
 
stack()->add($timeout);
 
 
?>
 
<!DOCTYPE html>
 
<html>
 
  <head>
 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 
    <title>Flare Dendrogram</title>
 
    <?php echo d3::script(2)?>
 
    <link type="text/css" rel="stylesheet" href="css/cluster.css"/>
 
  </head>
 
  <body>
 
    <div id="chart"></div>
 
    <script type="text/javascript">
 
<?php echo stack()->getInstance();?>
 
    </script>
 
  </body>
 
</html>
 
 
 |