Merge remote-tracking branch 'upstream/master'

2012-03-23 10:18:45 -07:00 · 2012-03-23 10:18:45 -07:00 · b906667c24
--- a/README.md
+++ b/README.md
@ -49,3 +49,7 @@ Next, from the root directory of this repository, install D3's dependencies:

 You can see the list of dependencies in package.json. NPM will install the
 packages in the node_modules directory.
+
+To run the tests, use:
+
+    make test
--- a/examples/hive/hive-area.html
+++ b/examples/hive/hive-area.html
@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+.arc {
+  fill-opacity: .2;
+}
+
+.axis .fill {
+  stroke: #aaa;
+  stroke-width: 8px;
+  stroke-linecap: square;
+}
+
+.axis .stroke {
+  stroke: #fff;
+  stroke-width: 12px;
+  stroke-linecap: square;
+}
+
+</style>
+<body>
+<script src="../../d3.v2.js"></script>
+<script src="link.js"></script>
+<script>
+
+var width = 960,
+    height = 500,
+    innerRadius = 40,
+    outerRadius = 240;
+
+var angle = d3.scale.ordinal().domain(d3.range(4)).rangePoints([0, 2 * Math.PI]),
+    radius = d3.scale.linear().range([innerRadius, outerRadius]),
+    color = d3.scale.category20c().domain(d3.range(20));
+
+var links = [
+  {source: {x: 0, y0: 0.9, y1: 1.0}, target: {x: 1, y0: 0.5, y1: 1.0}, group:  0},
+  {source: {x: 0, y0: 0.7, y1: 0.9}, target: {x: 1, y0: 0.4, y1: 0.5}, group:  1},
+  {source: {x: 0, y0: 0.4, y1: 0.7}, target: {x: 1, y0: 0.2, y1: 0.4}, group:  2},
+  {source: {x: 0, y0: 0.0, y1: 0.4}, target: {x: 1, y0: 0.0, y1: 0.2}, group:  3},
+  {source: {x: 1, y0: 0.8, y1: 1.0}, target: {x: 2, y0: 0.5, y1: 1.0}, group:  4},
+  {source: {x: 1, y0: 0.5, y1: 0.8}, target: {x: 2, y0: 0.2, y1: 0.5}, group:  5},
+  {source: {x: 1, y0: 0.3, y1: 0.5}, target: {x: 2, y0: 0.1, y1: 0.2}, group:  6},
+  {source: {x: 1, y0: 0.0, y1: 0.3}, target: {x: 2, y0: 0.0, y1: 0.1}, group:  7},
+  {source: {x: 2, y0: 0.8, y1: 1.0}, target: {x: 0, y0: 0.5, y1: 1.0}, group:  8},
+  {source: {x: 2, y0: 0.5, y1: 0.8}, target: {x: 0, y0: 0.2, y1: 0.5}, group:  9},
+  {source: {x: 2, y0: 0.1, y1: 0.5}, target: {x: 0, y0: 0.1, y1: 0.2}, group: 10},
+  {source: {x: 2, y0: 0.0, y1: 0.1}, target: {x: 0, y0: 0.0, y1: 0.1}, group: 11}
+];
+
+var svg = d3.select("body").append("svg")
+    .attr("width", width)
+    .attr("height", height)
+  .append("g")
+    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+
+svg.selectAll(".link")
+    .data(links)
+  .enter().append("path")
+    .attr("class", "link")
+    .attr("d", link()
+    .angle(function(d) { return angle(d.x); })
+    .startRadius(function(d) { return radius(d.y0); })
+    .endRadius(function(d) { return radius(d.y1); }))
+    .style("fill", function(d) { return color(d.group); });
+
+svg.selectAll(".axis")
+    .data(d3.range(3))
+  .enter().append("g")
+    .attr("class", "axis")
+    .attr("transform", function(d) { return "rotate(" + degrees(angle(d)) + ")"; })
+  .selectAll("line")
+    .data(["stroke", "fill"])
+  .enter().append("line")
+    .attr("class", function(d) { return d; })
+    .attr("x1", radius.range()[0])
+    .attr("x2", radius.range()[1]);
+
+function degrees(radians) {
+  return radians / Math.PI * 180 - 90;
+}
+
+</script>
--- a/examples/hive/hive.html
+++ b/examples/hive/hive.html
@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+.link {
+  fill: none;
+  stroke-width: 1.5px;
+}
+
+.axis, .node {
+  stroke: #000;
+  stroke-width: 1.5px;
+}
+
+</style>
+<body>
+<script src="../../d3.v2.js"></script>
+<script src="link.js"></script>
+<script>
+
+var width = 960,
+    height = 500,
+    innerRadius = 40,
+    outerRadius = 240;
+
+var angle = d3.scale.ordinal().domain(d3.range(4)).rangePoints([0, 2 * Math.PI]),
+    radius = d3.scale.linear().range([innerRadius, outerRadius]),
+    color = d3.scale.category10().domain(d3.range(20));
+
+var nodes = [
+  {x: 0, y: .1},
+  {x: 0, y: .9},
+  {x: 1, y: .2},
+  {x: 1, y: .3},
+  {x: 2, y: .1},
+  {x: 2, y: .8}
+];
+
+var links = [
+  {source: nodes[0], target: nodes[2]},
+  {source: nodes[1], target: nodes[3]},
+  {source: nodes[2], target: nodes[4]},
+  {source: nodes[2], target: nodes[5]},
+  {source: nodes[3], target: nodes[5]},
+  {source: nodes[4], target: nodes[0]},
+  {source: nodes[5], target: nodes[1]}
+];
+
+var svg = d3.select("body").append("svg")
+    .attr("width", width)
+    .attr("height", height)
+  .append("g")
+    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+
+svg.selectAll(".axis")
+    .data(d3.range(3))
+  .enter().append("line")
+    .attr("class", "axis")
+    .attr("transform", function(d) { return "rotate(" + degrees(angle(d)) + ")"; })
+    .attr("x1", radius.range()[0])
+    .attr("x2", radius.range()[1]);
+
+svg.selectAll(".link")
+    .data(links)
+  .enter().append("path")
+    .attr("class", "link")
+    .attr("d", link()
+    .angle(function(d) { return angle(d.x); })
+    .radius(function(d) { return radius(d.y); }))
+    .style("stroke", function(d) { return color(d.source.x); });
+
+svg.selectAll(".node")
+    .data(nodes)
+  .enter().append("circle")
+    .attr("class", "node")
+    .attr("transform", function(d) { return "rotate(" + degrees(angle(d.x)) + ")"; })
+    .attr("cx", function(d) { return radius(d.y); })
+    .attr("r", 5)
+    .style("fill", function(d) { return color(d.x); });
+
+function degrees(radians) {
+  return radians / Math.PI * 180 - 90;
+}
+
+</script>
--- a/examples/hive/link.js
+++ b/examples/hive/link.js
@ -0,0 +1,78 @@
+function link() {
+  var source = function(d) { return d.source; },
+      target = function(d) { return d.target; },
+      angle = function(d) { return d.angle; },
+      startRadius = function(d) { return d.radius; },
+      endRadius = startRadius,
+      arcOffset = -Math.PI / 2;
+
+  function link(d, i) {
+    var s = node(source, this, d, i),
+        t = node(target, this, d, i),
+        x;
+    if (t.a < s.a) x = t, t = s, s = x;
+    if (t.a - s.a > Math.PI) s.a += 2 * Math.PI;
+    var a1 = s.a + (t.a - s.a) / 3,
+        a2 = t.a - (t.a - s.a) / 3;
+    return s.r0 - s.r1 || t.r0 - t.r1
+        ? "M" + Math.cos(s.a) * s.r0 + "," + Math.sin(s.a) * s.r0
+        + "L" + Math.cos(s.a) * s.r1 + "," + Math.sin(s.a) * s.r1
+        + "C" + Math.cos(a1) * s.r1 + "," + Math.sin(a1) * s.r1
+        + " " + Math.cos(a2) * t.r1 + "," + Math.sin(a2) * t.r1
+        + " " + Math.cos(t.a) * t.r1 + "," + Math.sin(t.a) * t.r1
+        + "L" + Math.cos(t.a) * t.r0 + "," + Math.sin(t.a) * t.r0
+        + "C" + Math.cos(a2) * t.r0 + "," + Math.sin(a2) * t.r0
+        + " " + Math.cos(a1) * s.r0 + "," + Math.sin(a1) * s.r0
+        + " " + Math.cos(s.a) * s.r0 + "," + Math.sin(s.a) * s.r0
+        : "M" + Math.cos(s.a) * s.r0 + "," + Math.sin(s.a) * s.r0
+        + "C" + Math.cos(a1) * s.r1 + "," + Math.sin(a1) * s.r1
+        + " " + Math.cos(a2) * t.r1 + "," + Math.sin(a2) * t.r1
+        + " " + Math.cos(t.a) * t.r1 + "," + Math.sin(t.a) * t.r1;
+  }
+
+  function node(method, thiz, d, i) {
+    var node = method.call(thiz, d, i),
+        a = +(typeof angle === "function" ? angle.call(thiz, node, i) : angle) + arcOffset,
+        r0 = +(typeof startRadius === "function" ? startRadius.call(thiz, node, i) : startRadius),
+        r1 = (startRadius === endRadius ? r0 : +(typeof endRadius === "function" ? endRadius.call(thiz, node, i) : endRadius));
+    return {r0: r0, r1: r1, a: a};
+  }
+
+  link.source = function(_) {
+    if (!arguments.length) return source;
+    source = _;
+    return link;
+  };
+
+  link.target = function(_) {
+    if (!arguments.length) return target;
+    target = _;
+    return link;
+  };
+
+  link.angle = function(_) {
+    if (!arguments.length) return angle;
+    angle = _;
+    return link;
+  };
+
+  link.radius = function(_) {
+    if (!arguments.length) return startRadius;
+    startRadius = endRadius = _;
+    return link;
+  };
+
+  link.startRadius = function(_) {
+    if (!arguments.length) return startRadius;
+    startRadius = _;
+    return link;
+  };
+
+  link.endRadius = function(_) {
+    if (!arguments.length) return endRadius;
+    endRadius = _;
+    return link;
+  };
+
+  return link;
+}