| Index: tools/win/sizeviewer/template.html
|
| diff --git a/tools/win/sizeviewer/template.html b/tools/win/sizeviewer/template.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..ffbffbb1f1574a2c7ec30b20d12e640bee97b527
|
| --- /dev/null
|
| +++ b/tools/win/sizeviewer/template.html
|
| @@ -0,0 +1,199 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| + <head>
|
| + <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
|
| + <link type="text/css" rel="stylesheet" href="style.css"/>
|
| + <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
|
| + <style type="text/css">
|
| +
|
| +body {
|
| + overflow: hidden;
|
| + margin: 0;
|
| + font-size: 14px;
|
| + font-family: "Helvetica Neue", Helvetica;
|
| +}
|
| +
|
| +#chart, #header, #footer {
|
| + position: absolute;
|
| + top: 0;
|
| +}
|
| +
|
| +#header, #footer {
|
| + z-index: 1;
|
| + display: block;
|
| + font-size: 36px;
|
| + font-weight: 300;
|
| + text-shadow: 0 1px 0 #fff;
|
| +}
|
| +
|
| +#header.inverted, #footer.inverted {
|
| + color: #fff;
|
| + text-shadow: 0 1px 4px #000;
|
| +}
|
| +
|
| +#header {
|
| + top: 80px;
|
| + left: 140px;
|
| + width: 1000px;
|
| +}
|
| +
|
| +#footer {
|
| + top: 1080px;
|
| + right: 140px;
|
| + text-align: right;
|
| +}
|
| +
|
| +rect {
|
| + fill: none;
|
| + pointer-events: all;
|
| +}
|
| +
|
| +pre {
|
| + font-size: 18px;
|
| +}
|
| +
|
| +line {
|
| + stroke: #000;
|
| + stroke-width: 1.5px;
|
| +}
|
| +
|
| +.string, .regexp {
|
| + color: #f39;
|
| +}
|
| +
|
| +.keyword {
|
| + color: #00c;
|
| +}
|
| +
|
| +.comment {
|
| + color: #777;
|
| + font-style: oblique;
|
| +}
|
| +
|
| +.number {
|
| + color: #369;
|
| +}
|
| +
|
| +.class, .special {
|
| + color: #1181B8;
|
| +}
|
| +
|
| +a:link, a:visited {
|
| + color: #000;
|
| + text-decoration: none;
|
| +}
|
| +
|
| +a:hover {
|
| + color: #666;
|
| +}
|
| +
|
| +.hint {
|
| + position: absolute;
|
| + right: 0;
|
| + width: 1280px;
|
| + font-size: 12px;
|
| + color: #999;
|
| +}
|
| +.chart {
|
| + display: block;
|
| + margin: auto;
|
| + margin-top: 60px;
|
| + font-size: 11px;
|
| +}
|
| +
|
| +rect {
|
| + stroke: #eee;
|
| + fill: #aaa;
|
| + fill-opacity: .8;
|
| +}
|
| +
|
| +rect.parent {
|
| + cursor: pointer;
|
| + fill: steelblue;
|
| +}
|
| +
|
| +text {
|
| + pointer-events: none;
|
| +}
|
| +
|
| + </style>
|
| + </head>
|
| + <body>
|
| + <div id="body">
|
| + <div id="footer">
|
| + $dllname
|
| + </div>
|
| + </div>
|
| + <script type="text/javascript">
|
| +
|
| +var w = 1120,
|
| + h = 1000,
|
| + x = d3.scale.linear().range([0, w]),
|
| + y = d3.scale.linear().range([0, h]);
|
| +
|
| +var vis = d3.select("#body").append("div")
|
| + .attr("class", "chart")
|
| + .style("width", w + "px")
|
| + .style("height", h + "px")
|
| + .append("svg:svg")
|
| + .attr("width", w)
|
| + .attr("height", h);
|
| +
|
| +var partition = d3.layout.partition()
|
| + .value(function(d) { return d.size; });
|
| +
|
| +(function(root) {
|
| + var g = vis.selectAll("g")
|
| + .data(partition.nodes(root))
|
| + .enter().append("svg:g")
|
| + .attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(d.x) + ")"; })
|
| + .on("click", click);
|
| +
|
| + var kx = w / root.dx,
|
| + ky = h / 1;
|
| +
|
| + g.append("svg:rect")
|
| + .attr("width", root.dy * kx)
|
| + .attr("height", function(d) { return d.dx * ky; })
|
| + .attr("class", function(d) { return d.children ? "parent" : "child"; });
|
| +
|
| + g.append("svg:text")
|
| + .attr("transform", transform)
|
| + .attr("dy", ".35em")
|
| + .style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; })
|
| + .text(function(d) { return d.name; })
|
| +
|
| + d3.select(window)
|
| + .on("click", function() { click(root); })
|
| +
|
| + function click(d) {
|
| + if (!d.children) return;
|
| +
|
| + kx = (d.y ? w - 40 : w) / (1 - d.y);
|
| + ky = h / d.dx;
|
| + x.domain([d.y, 1]).range([d.y ? 40 : 0, w]);
|
| + y.domain([d.x, d.x + d.dx]);
|
| +
|
| + var t = g.transition()
|
| + .duration(d3.event.altKey ? 7500 : 750)
|
| + .attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(d.x) + ")"; });
|
| +
|
| + t.select("rect")
|
| + .attr("width", d.dy * kx)
|
| + .attr("height", function(d) { return d.dx * ky; });
|
| +
|
| + t.select("text")
|
| + .attr("transform", transform)
|
| + .style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; });
|
| +
|
| + d3.event.stopPropagation();
|
| + }
|
| +
|
| + function transform(d) {
|
| + return "translate(8," + d.dx * ky / 2 + ")";
|
| + }
|
| +})($data);
|
| +
|
| + </script>
|
| + </body>
|
| +</html>
|
|
|