Home | History | Annotate | Download | only in sizeviewer 
      1 <!DOCTYPE html>
      2 <html>
      3   <head>
      4     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
      5     <link type="text/css" rel="stylesheet" href="style.css"/>
      6     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
      7     <style type="text/css">
      8 
      9 body {
     10   overflow: hidden;
     11   margin: 0;
     12   font-size: 14px;
     13   font-family: "Helvetica Neue", Helvetica;
     14 }
     15 
     16 #chart, #header, #footer {
     17   position: absolute;
     18   top: 0;
     19 }
     20 
     21 #header, #footer {
     22   z-index: 1;
     23   display: block;
     24   font-size: 36px;
     25   font-weight: 300;
     26   text-shadow: 0 1px 0 #fff;
     27 }
     28 
     29 #header.inverted, #footer.inverted {
     30   color: #fff;
     31   text-shadow: 0 1px 4px #000;
     32 }
     33 
     34 #header {
     35   top: 80px;
     36   left: 140px;
     37   width: 1000px;
     38 }
     39 
     40 #footer {
     41   top: 1080px;
     42   right: 140px;
     43   text-align: right;
     44 }
     45 
     46 rect {
     47   fill: none;
     48   pointer-events: all;
     49 }
     50 
     51 pre {
     52   font-size: 18px;
     53 }
     54 
     55 line {
     56   stroke: #000;
     57   stroke-width: 1.5px;
     58 }
     59 
     60 .string, .regexp {
     61   color: #f39;
     62 }
     63 
     64 .keyword {
     65   color: #00c;
     66 }
     67 
     68 .comment {
     69   color: #777;
     70   font-style: oblique;
     71 }
     72 
     73 .number {
     74   color: #369;
     75 }
     76 
     77 .class, .special {
     78   color: #1181B8;
     79 }
     80 
     81 a:link, a:visited {
     82   color: #000;
     83   text-decoration: none;
     84 }
     85 
     86 a:hover {
     87   color: #666;
     88 }
     89 
     90 .hint {
     91   position: absolute;
     92   right: 0;
     93   width: 1280px;
     94   font-size: 12px;
     95   color: #999;
     96 }
     97 .chart {
     98   display: block;
     99   margin: auto;
    100   margin-top: 60px;
    101   font-size: 11px;
    102 }
    103 
    104 rect {
    105   stroke: #eee;
    106   fill: #aaa;
    107   fill-opacity: .8;
    108 }
    109 
    110 rect.parent {
    111   cursor: pointer;
    112   fill: steelblue;
    113 }
    114 
    115 text {
    116   pointer-events: none;
    117 }
    118 
    119     </style>
    120   </head>
    121   <body>
    122     <div id="body">
    123       <div id="footer">
    124         $dllname
    125       </div>
    126     </div>
    127     <script type="text/javascript">
    128 
    129 var w = 1120,
    130     h = 1000,
    131     x = d3.scale.linear().range([0, w]),
    132     y = d3.scale.linear().range([0, h]);
    133 
    134 var vis = d3.select("#body").append("div")
    135     .attr("class", "chart")
    136     .style("width", w + "px")
    137     .style("height", h + "px")
    138   .append("svg:svg")
    139     .attr("width", w)
    140     .attr("height", h);
    141 
    142 var partition = d3.layout.partition()
    143     .value(function(d) { return d.size; });
    144 
    145 (function(root) {
    146   var g = vis.selectAll("g")
    147       .data(partition.nodes(root))
    148     .enter().append("svg:g")
    149       .attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(d.x) + ")"; })
    150       .on("click", click);
    151 
    152   var kx = w / root.dx,
    153       ky = h / 1;
    154 
    155   g.append("svg:rect")
    156       .attr("width", root.dy * kx)
    157       .attr("height", function(d) { return d.dx * ky; })
    158       .attr("class", function(d) { return d.children ? "parent" : "child"; });
    159 
    160   g.append("svg:text")
    161       .attr("transform", transform)
    162       .attr("dy", ".35em")
    163       .style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; })
    164       .text(function(d) { return d.name; })
    165 
    166   d3.select(window)
    167       .on("click", function() { click(root); })
    168 
    169   function click(d) {
    170     if (!d.children) return;
    171 
    172     kx = (d.y ? w - 40 : w) / (1 - d.y);
    173     ky = h / d.dx;
    174     x.domain([d.y, 1]).range([d.y ? 40 : 0, w]);
    175     y.domain([d.x, d.x + d.dx]);
    176 
    177     var t = g.transition()
    178         .duration(d3.event.altKey ? 7500 : 750)
    179         .attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(d.x) + ")"; });
    180 
    181     t.select("rect")
    182         .attr("width", d.dy * kx)
    183         .attr("height", function(d) { return d.dx * ky; });
    184 
    185     t.select("text")
    186         .attr("transform", transform)
    187         .style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; });
    188 
    189     d3.event.stopPropagation();
    190   }
    191 
    192   function transform(d) {
    193     return "translate(8," + d.dx * ky / 2 + ")";
    194   }
    195 })($data);
    196 
    197     </script>
    198   </body>
    199 </html>
    200