Add SVG-based treemap example.

2011-07-20 09:07:14 +01:00 · 2011-07-20 09:07:14 +01:00 · d4459481b2
--- a/examples/treemap/treemap-svg.html
+++ b/examples/treemap/treemap-svg.html
@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="../../d3.layout.js"></script>
+    <style type="text/css">
+
+rect {
+  fill: none;
+  stroke: #fff;
+}
+
+text {
+  font: 10px sans-serif;
+}
+
+    </style>
+  </head>
+  <body>
+    <script type="text/javascript" src="treemap-svg.js"></script>
+  </body>
+</html>
--- a/examples/treemap/treemap-svg.js
+++ b/examples/treemap/treemap-svg.js
@ -0,0 +1,34 @@
+var w = 960,
+    h = 500,
+    color = d3.scale.category20c();
+
+var treemap = d3.layout.treemap()
+    .size([w + 1, h + 1])
+    .value(function(d) { return d.size; })
+    .sticky(true);
+
+var svg = d3.select("body").append("svg:svg")
+    .style("width", w)
+    .style("height", h)
+  .append("svg:g")
+    .attr("transform", "translate(-.5,-.5)");
+
+d3.json("../data/flare.json", function(json) {
+  var cell = svg.data([json]).selectAll("g")
+      .data(treemap)
+    .enter().append("svg:g")
+      .attr("class", "cell")
+      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
+
+  cell.append("svg:rect")
+      .attr("width", function(d) { return d.dx; })
+      .attr("height", function(d) { return d.dy; })
+      .style("fill", function(d) { return d.children ? color(d.data.name) : null; });
+
+  cell.append("svg:text")
+      .attr("x", function(d) { return d.dx / 2; })
+      .attr("y", function(d) { return d.dy / 2; })
+      .attr("dy", ".35em")
+      .attr("text-anchor", "middle")
+      .text(function(d) { return d.children ? null : d.data.name; });
+});