200 lines
3.5 KiB
HTML
200 lines
3.5 KiB
HTML
|
<!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>
|