Allow counter-clockwise arcs.

If the start angle is greater than the end angle, the arc is now drawn counter-
clockwise. This is sometimes useful in conjunction with text paths. Fixes #1749.

d3.js

@@ -7890,9 +7890,8 @@
   d3.svg.arc = function() {
     var innerRadius = d3_svg_arcInnerRadius, outerRadius = d3_svg_arcOuterRadius, startAngle = d3_svg_arcStartAngle, endAngle = d3_svg_arcEndAngle;
     function arc() {
-      var r0 = innerRadius.apply(this, arguments), r1 = outerRadius.apply(this, arguments), a0 = startAngle.apply(this, arguments) + d3_svg_arcOffset, a1 = endAngle.apply(this, arguments) + d3_svg_arcOffset, da = (a1 < a0 && (da = a0, 
-      a0 = a1, a1 = da), a1 - a0), df = da < π ? "0" : "1", c0 = Math.cos(a0), s0 = Math.sin(a0), c1 = Math.cos(a1), s1 = Math.sin(a1);
-      return da >= d3_svg_arcMax ? r0 ? "M0," + r1 + "A" + r1 + "," + r1 + " 0 1,1 0," + -r1 + "A" + r1 + "," + r1 + " 0 1,1 0," + r1 + "M0," + r0 + "A" + r0 + "," + r0 + " 0 1,0 0," + -r0 + "A" + r0 + "," + r0 + " 0 1,0 0," + r0 + "Z" : "M0," + r1 + "A" + r1 + "," + r1 + " 0 1,1 0," + -r1 + "A" + r1 + "," + r1 + " 0 1,1 0," + r1 + "Z" : r0 ? "M" + r1 * c0 + "," + r1 * s0 + "A" + r1 + "," + r1 + " 0 " + df + ",1 " + r1 * c1 + "," + r1 * s1 + "L" + r0 * c1 + "," + r0 * s1 + "A" + r0 + "," + r0 + " 0 " + df + ",0 " + r0 * c0 + "," + r0 * s0 + "Z" : "M" + r1 * c0 + "," + r1 * s0 + "A" + r1 + "," + r1 + " 0 " + df + ",1 " + r1 * c1 + "," + r1 * s1 + "L0,0" + "Z";
+      var r0 = innerRadius.apply(this, arguments), r1 = outerRadius.apply(this, arguments), a0 = startAngle.apply(this, arguments) + d3_svg_arcOffset, a1 = endAngle.apply(this, arguments) + d3_svg_arcOffset, da = Math.abs(a1 - a0), df = da < π ? " 0 0" : " 0 1", fs = a1 < a0 ? ",0 " : ",1 ", ss = a1 < a0 ? ",1 " : ",0 ", c0 = Math.cos(a0), s0 = Math.sin(a0), c1 = Math.cos(a1), s1 = Math.sin(a1);
+      return da >= d3_svg_arcMax ? r0 ? "M0," + r1 + "A" + r1 + "," + r1 + " 0 1" + fs + "0," + -r1 + "A" + r1 + "," + r1 + " 0 1" + fs + "0," + r1 + "M0," + r0 + "A" + r0 + "," + r0 + " 0 1" + ss + "0," + -r0 + "A" + r0 + "," + r0 + " 0 1" + ss + "0," + r0 + "Z" : "M0," + r1 + "A" + r1 + "," + r1 + " 0 1" + fs + "0," + -r1 + "A" + r1 + "," + r1 + " 0 1" + fs + "0," + r1 + "Z" : r0 ? "M" + r1 * c0 + "," + r1 * s0 + "A" + r1 + "," + r1 + df + fs + r1 * c1 + "," + r1 * s1 + "L" + r0 * c1 + "," + r0 * s1 + "A" + r0 + "," + r0 + df + ss + r0 * c0 + "," + r0 * s0 + "Z" : "M" + r1 * c0 + "," + r1 * s0 + "A" + r1 + "," + r1 + df + fs + r1 * c1 + "," + r1 * s1 + "L0,0Z";
     }
     arc.innerRadius = function(v) {
       if (!arguments.length) return innerRadius;

src/svg/arc.js

@@ -13,8 +13,10 @@ d3.svg.arc = function() {
         r1 = outerRadius.apply(this, arguments),
         a0 = startAngle.apply(this, arguments) + d3_svg_arcOffset,
         a1 = endAngle.apply(this, arguments) + d3_svg_arcOffset,
-        da = (a1 < a0 && (da = a0, a0 = a1, a1 = da), a1 - a0),
-        df = da < π ? "0" : "1",
+        da = Math.abs(a1 - a0),
+        df = da < π ? " 0 0" : " 0 1",
+        fs = a1 < a0 ? ",0 " : ",1 ",
+        ss = a1 < a0 ? ",1 " : ",0 ",
         c0 = Math.cos(a0),
         s0 = Math.sin(a0),
         c1 = Math.cos(a1),
@@ -22,26 +24,25 @@ d3.svg.arc = function() {
     return da >= d3_svg_arcMax
       ? (r0
       ? "M0," + r1
-      + "A" + r1 + "," + r1 + " 0 1,1 0," + (-r1)
-      + "A" + r1 + "," + r1 + " 0 1,1 0," + r1
+      + "A" + r1 + "," + r1 + " 0 1" + fs + "0," + (-r1)
+      + "A" + r1 + "," + r1 + " 0 1" + fs + "0," + r1
       + "M0," + r0
-      + "A" + r0 + "," + r0 + " 0 1,0 0," + (-r0)
-      + "A" + r0 + "," + r0 + " 0 1,0 0," + r0
+      + "A" + r0 + "," + r0 + " 0 1" + ss + "0," + (-r0)
+      + "A" + r0 + "," + r0 + " 0 1" + ss + "0," + r0
       + "Z"
       : "M0," + r1
-      + "A" + r1 + "," + r1 + " 0 1,1 0," + (-r1)
-      + "A" + r1 + "," + r1 + " 0 1,1 0," + r1
+      + "A" + r1 + "," + r1 + " 0 1" + fs + "0," + (-r1)
+      + "A" + r1 + "," + r1 + " 0 1" + fs + "0," + r1
       + "Z")
       : (r0
       ? "M" + r1 * c0 + "," + r1 * s0
-      + "A" + r1 + "," + r1 + " 0 " + df + ",1 " + r1 * c1 + "," + r1 * s1
+      + "A" + r1 + "," + r1 + df + fs + r1 * c1 + "," + r1 * s1
       + "L" + r0 * c1 + "," + r0 * s1
-      + "A" + r0 + "," + r0 + " 0 " + df + ",0 " + r0 * c0 + "," + r0 * s0
+      + "A" + r0 + "," + r0 + df + ss + r0 * c0 + "," + r0 * s0
       + "Z"
       : "M" + r1 * c0 + "," + r1 * s0
-      + "A" + r1 + "," + r1 + " 0 " + df + ",1 " + r1 * c1 + "," + r1 * s1
-      + "L0,0"
-      + "Z");
+      + "A" + r1 + "," + r1 + df + fs + r1 * c1 + "," + r1 * s1
+      + "L0,0Z");
   }
 
   arc.innerRadius = function(v) {

test/svg/arc-test.js

@@ -84,10 +84,13 @@ suite.addBatch({
       assert.equal(tt, t, "expected this, got {actual}");
     },
 
-    "startAngle and endAngle are swapped if endAngle is less than startAngle": function(arc) {
+    "arc is drawn counter-clockwise if endAngle is less than startAngle": function(arc) {
+      var a = arc().innerRadius(0).outerRadius(100);
+      assert.pathEqual(a.startAngle(2 * Math.PI).endAngle(Math.PI)(), "M0,-100A100,100 0 1,0 0,100L0,0Z");
+      assert.pathEqual(a.startAngle(-Math.PI).endAngle(Math.PI)(), "M0,100A100,100 0 1,1 0,-100A100,100 0 1,1 0,100Z");
       var a = arc().innerRadius(50).outerRadius(100);
-      assert.pathEqual(a.startAngle(2 * Math.PI).endAngle(Math.PI)(), a.startAngle(Math.PI).endAngle(2 * Math.PI)());
-      assert.pathEqual(a.startAngle(-Math.PI).endAngle(Math.PI)(), a.startAngle(Math.PI).endAngle(-Math.PI)());
+      assert.pathEqual(a.startAngle(2 * Math.PI).endAngle(Math.PI)(), "M0,-100A100,100 0 1,0 0,100L0,50A50,50 0 1,1 0,-50Z");
+      assert.pathEqual(a.startAngle(-Math.PI).endAngle(Math.PI)(), "M0,100A100,100 0 1,1 0,-100A100,100 0 1,1 0,100M0,50A50,50 0 1,0 0,-50A50,50 0 1,0 0,50Z");
     },
 
     "angles are defined in radians, with zero at 12 o'clock": function(arc) {