<?php
include_once '../d3.classes.inc.php';
$vars = d3::variables(array("width" => 960, "height" => 700, "color" => d3()->scale->category20c()));
stack()->add($vars);
$radius= d3::variable(d3::unescape( d3::concat( Math()->min($vars->width()->get(), $vars->height()->get()) ), d3::unescape("/2") ), "radius" );
stack()->add($radius->linebreak(2));
$svg = d3()->select("body")->append("svg")->linebreak()->tab()
->attr("width", $vars->width()->get())->linebreak()->tab()
->attr("height", $vars->height()->get())->linebreak()->tab()
->append("g")->linebreak()->tab()->attr("transform", d3::unescape('"translate("+width/2+","+height*.52+")"'))
->createVar("svg");
stack()->add($svg->linebreak());
$partition = d3()->layout->partition()->linebreak()->tab()
->sort(d3::unescape("null"))->linebreak()->tab()
->size(array(d3::concat(2,"*", "Math.PI"), d3::concat($radius->getVar(), "*", $radius->getVar())))->linebreak()->tab()
->value(function($d){return 1;})
->createVar("partition");
stack()->add($partition->linebreak());
$arc = d3()->svg->arc()->linebreak()->tab()
->startAngle(function($d){return $d->x;})->linebreak()->tab()
->endAngle(function($d){return $d->x + $d->dx;})->linebreak()->tab()
->innerRadius(function($d){return Math()->sqrt($d->y);})->linebreak()->tab()
->outerRadius(function($d){return Math()->sqrt($d->y + $d->dy);})
->createVar("arc");
stack()->add($arc->linebreak());
$f = f3("error","root");
$path = $svg->get()->datum(d3::unescape("root"))->selectAll("path")->linebreak()->tab()
->data($partition->get()->nodes(d3::property))->linebreak()->tab()
->enter()->append("path")->linebreak()->tab()
->attr("display", function($d){return $d->depth ? null: "none";})->linebreak()->tab()
->attr("d", $arc->get())->linebreak()->tab()
->style("stroke", "#fff")->linebreak()->tab()
->style("fill", function($d){$v=($d->children?$d:$d->parent);return color($v->name);})->linebreak()->tab()
->style("fill-rule", "evenodd")->linebreak()->tab()
->each(d3::unescape("stash"))
->createVar("path")
;
$f->add($path->linebreak());
$change = f3()->name("change");
$change->add( d3::ternary('value = this.value === "count"', f3()->add("return 1;"), f3("d")->add("return d.size;") ) );
$change->add( $path->get()
->data($partition->get()->value(d3::unescape("value"))->nodes(d3::property) )->linebreak()->tab()
->transition()->duration(1500)->linebreak()->tab()->attrTween("d", d3::unescape("arcTween"))
->colon()
);
$f->add(d3()->selectAll("input")->on("change", $change));
$load = d3()->json("data/flare.json", $f);
stack()->add($load->colon()->linebreak());
stack()->add( f3("d")->name("stash")->add("d.x0=d.x;")->add("d.dx0=d.x;")->colon()->linebreak() );
stack()->add( f3("a")->name("arcTween")->add("var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
return function(t) {
var b = i(t);
a.x0 = b.x;
a.dx0 = b.dx;
return arc(b);
};")->colon()->linebreak() );
stack()->add( d3()->select(d3::unescape("self.frameElement"))->style("height", d3::concat($vars->height()->getVar(), '+"px"'))->colon() );
?><!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
</style>
<?php echo d3::script()?>
</head>
<body>
<form>
<label><input type="radio" name="mode" value="size"> Size</label>
<label><input type="radio" name="mode" value="count" checked> Count</label>
</form>
<script type="text/javascript">
<?php echo stack()->getInstance();?>
</script>
</body>
</html>
|
Download
