| <!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> |
