Make toString return #RRGGBB for all colours.

This breaks a test case that ensures d3.hsl(x) == d3.hsl(d3.hsl(x)). Fixes d3#333.
stachrom · Oct 7, 2011 · cc0ae76 · cc0ae76
1 parent f70ab33
commit cc0ae76
Show file tree

Hide file tree

Showing 18 changed files with 93 additions and 98 deletions.
diff --git a/d3.js b/d3.js
@@ -780,10 +780,10 @@ d3.interpolateRgb = function(a, b) {
       bg = b.g - ag,
       bb = b.b - ab;
   return function(t) {
-    return "rgb(" + Math.round(ar + br * t)
-        + "," + Math.round(ag + bg * t)
-        + "," + Math.round(ab + bb * t)
-        + ")";
+    return "#"
+        + d3_rgb_hex(Math.round(ar + br * t))
+        + d3_rgb_hex(Math.round(ag + bg * t))
+        + d3_rgb_hex(Math.round(ab + bb * t));
   };
 };
 
@@ -1180,7 +1180,7 @@ d3_Hsl.prototype.rgb = function() {
 };
 
 d3_Hsl.prototype.toString = function() {
-  return "hsl(" + this.h + "," + this.s * 100 + "%," + this.l * 100 + "%)";
+  return this.rgb().toString();
 };
 
 function d3_hsl_rgb(h, s, l) {

diff --git a/d3.min.js b/d3.min.js
diff --git a/src/core/hsl.js b/src/core/hsl.js
@@ -29,7 +29,7 @@ d3_Hsl.prototype.rgb = function() {
 };
 
 d3_Hsl.prototype.toString = function() {
-  return "hsl(" + this.h + "," + this.s * 100 + "%," + this.l * 100 + "%)";
+  return this.rgb().toString();
 };
 
 function d3_hsl_rgb(h, s, l) {

diff --git a/src/core/interpolate.js b/src/core/interpolate.js
@@ -102,10 +102,10 @@ d3.interpolateRgb = function(a, b) {
       bg = b.g - ag,
       bb = b.b - ab;
   return function(t) {
-    return "rgb(" + Math.round(ar + br * t)
-        + "," + Math.round(ag + bg * t)
-        + "," + Math.round(ab + bb * t)
-        + ")";
+    return "#"
+        + d3_rgb_hex(Math.round(ar + br * t))
+        + d3_rgb_hex(Math.round(ag + bg * t))
+        + d3_rgb_hex(Math.round(ab + bb * t));
   };
 };
 

diff --git a/test/core/hsl-test.js b/test/core/hsl-test.js
@@ -32,7 +32,7 @@ suite.addBatch({
       color.h++;
       color.s += .1;
       color.l += .1;
-      assert.equal(color + "", "hsl(181,60%,70%)");
+      assert.equal(color + "", "#85dfe0");
     },
     "parses hexadecimal shorthand format (e.g., \"#abc\")": function(hsl) {
       assert.hslEqual(hsl("#abc"), 210, .25, .733333);
@@ -72,14 +72,9 @@ suite.addBatch({
       assert.hslEqual(hsl("lightsteelblue").darker(1), 213.913043, .4107143, .5462745);
       assert.hslEqual(hsl("lightsteelblue").darker(2), 213.913043, .4107143, .38239216);
     },
-    "string coercion returns HSL format": function(hsl) {
-      var re = /^hsl\([0-9]+(.[0-9]+)?,[0-9.]+%,[0-9.]+%\)$/;
-      assert.match(hsl("#abcdef"), re);
-      assert.match(hsl("moccasin"), re);
-      assert.strictEqual(hsl("hsl(60, 100%, 20%)") + "", "hsl(60,100%,20%)");
-      assert.match(hsl("rgb(12, 34, 56))"), re);
-      assert.match(hsl(d3.rgb(12, 34, 56)), re);
-      assert.strictEqual(hsl(d3.hsl(60, 1, .2)) + "", "hsl(60,100%,20%)");
+    "string coercion returns RGB format": function(hsl) {
+      assert.strictEqual(hsl("hsl(60, 100%, 20%)") + "", "#666600");
+      assert.strictEqual(hsl(d3.hsl(60, 1, .2)) + "", "#666600");
     }
   }
 });

diff --git a/test/core/interpolate-test.js b/test/core/interpolate-test.js
@@ -15,7 +15,7 @@ suite.addBatch({
       assert.equal(interpolate(2, 12)(.4), 6);
     },
     "interpolates colors": function(interpolate) {
-      assert.equal(interpolate("#abcdef", "#fedcba")(.4), "rgb(204,211,218)");
+      assert.equal(interpolate("#abcdef", "#fedcba")(.4), "#ccd3da");
     },
     "interpolates strings": function(interpolate) {
       assert.equal(interpolate("width:10px;", "width:50px;")(.2), "width:18px;");
@@ -83,22 +83,22 @@ suite.addBatch({
       return d3.interpolateRgb;
     },
     "parses string input": function(interpolate) {
-      assert.equal(interpolate("steelblue", "#f00")(.2), "rgb(107,104,144)");
-      assert.equal(interpolate("steelblue", "#f00")(.6), "rgb(181,52,72)");
+      assert.equal(interpolate("steelblue", "#f00")(.2), "#6b6890");
+      assert.equal(interpolate("steelblue", "#f00")(.6), "#b53448");
     },
     "parses d3.rgb input": function(interpolate) {
-      assert.equal(interpolate(d3.rgb("steelblue"), "#f00")(.2), "rgb(107,104,144)");
-      assert.equal(interpolate("steelblue", d3.rgb(255, 0, 0))(.6), "rgb(181,52,72)");
+      assert.equal(interpolate(d3.rgb("steelblue"), "#f00")(.2), "#6b6890");
+      assert.equal(interpolate("steelblue", d3.rgb(255, 0, 0))(.6), "#b53448");
     },
     "parses d3.hsl input": function(interpolate) {
-      assert.equal(interpolate(d3.hsl("steelblue"), "#f00")(.2), "rgb(107,104,144)");
-      assert.equal(interpolate("steelblue", d3.hsl(0, 1, .5))(.6), "rgb(181,52,72)");
+      assert.equal(interpolate(d3.hsl("steelblue"), "#f00")(.2), "#6b6890");
+      assert.equal(interpolate("steelblue", d3.hsl(0, 1, .5))(.6), "#b53448");
     },
     "interpolates in RGB color space": function(interpolate) {
-      assert.equal(interpolate("steelblue", "#f00")(.2), "rgb(107,104,144)");
+      assert.equal(interpolate("steelblue", "#f00")(.2), "#6b6890");
     },
     "outputs an RGB string": function(interpolate) {
-      assert.equal(interpolate("steelblue", "#f00")(.2), "rgb(107,104,144)");
+      assert.equal(interpolate("steelblue", "#f00")(.2), "#6b6890");
     }
   }
 });
@@ -162,10 +162,10 @@ suite.addBatch({
       assert.deepEqual(interpolate(new a(2), new a(4))(.5), {a: 3, b: 12});
     },
     "interpolates color properties as rgb": function(interpolate) {
-      assert.deepEqual(interpolate({background: "red"}, {background: "green"})(.5), {background: "rgb(128,64,0)"});
-      assert.deepEqual(interpolate({fill: "red"}, {fill: "green"})(.5), {fill: "rgb(128,64,0)"});
-      assert.deepEqual(interpolate({stroke: "red"}, {stroke: "green"})(.5), {stroke: "rgb(128,64,0)"});
-      assert.deepEqual(interpolate({color: "red"}, {color: "green"})(.5), {color: "rgb(128,64,0)"});
+      assert.deepEqual(interpolate({background: "red"}, {background: "green"})(.5), {background: "#804000"});
+      assert.deepEqual(interpolate({fill: "red"}, {fill: "green"})(.5), {fill: "#804000"});
+      assert.deepEqual(interpolate({stroke: "red"}, {stroke: "green"})(.5), {stroke: "#804000"});
+      assert.deepEqual(interpolate({color: "red"}, {color: "green"})(.5), {color: "#804000"});
     },
     "interpolates nested objects and arrays": function(interpolate) {
       assert.deepEqual(interpolate({foo: [2, 12]}, {foo: [4, 24]})(.5), {foo: [3, 18]});

diff --git a/test/core/selection-attr-test.js b/test/core/selection-attr-test.js
@@ -91,8 +91,8 @@ suite.addBatch({
     },
     "sets an attribute as a function of data": function(div) {
       div.attr("bgcolor", d3.interpolateRgb("brown", "steelblue"));
-      assert.equal(div[0][0].getAttribute("bgcolor"), "rgb(165,42,42)");
-      assert.equal(div[0][1].getAttribute("bgcolor"), "rgb(70,130,180)");
+      assert.equal(div[0][0].getAttribute("bgcolor"), "#a52a2a");
+      assert.equal(div[0][1].getAttribute("bgcolor"), "#4682b4");
     },
     "sets an attribute as a function of index": function(div) {
       div.attr("bgcolor", function(d, i) { return "color-" + i; });

diff --git a/test/core/selection-property-test.js b/test/core/selection-property-test.js
@@ -58,8 +58,8 @@ suite.addBatch({
     },
     "sets a property as a function": function(div) {
       div.property("bgcolor", d3.interpolateRgb("brown", "steelblue"));
-      assert.equal(div[0][0].bgcolor, "rgb(165,42,42)");
-      assert.equal(div[0][1].bgcolor, "rgb(70,130,180)");
+      assert.equal(div[0][0].bgcolor, "#a52a2a");
+      assert.equal(div[0][1].bgcolor, "#4682b4");
     },
     "gets a property value": function(div) {
       div[0][0].bgcolor = "purple";

diff --git a/test/core/selection-style-test.js b/test/core/selection-style-test.js
@@ -62,8 +62,8 @@ suite.addBatch({
     },
     "sets a property as a function": function(div) {
       div.style("background-color", d3.interpolateRgb("orange", "yellow"));
-      assert.equal(div[0][0].style["background-color"], "rgb(255,165,0)");
-      assert.equal(div[0][1].style["background-color"], "rgb(255,255,0)");
+      assert.equal(div[0][0].style["background-color"], "#ffa500");
+      assert.equal(div[0][1].style["background-color"], "#ffff00");
     },
     "gets a property value": function(div) {
       div[0][0].style.setProperty("background-color", "green", "");

diff --git a/test/core/transition-test-attr.js b/test/core/transition-test-attr.js
@@ -28,6 +28,6 @@ module.exports = {
     assert.equal(result.selection.attr("width"), "200");
   },
   "sets an attribute as a function": function(result) {
-    assert.equal(result.selection.attr("color"), "rgb(0,128,0)");
+    assert.equal(result.selection.attr("color"), "#008000");
   }
 };
diff --git a/test/core/transition-test-style.js b/test/core/transition-test-style.js
@@ -22,13 +22,13 @@ module.exports = {
     assert.typeOf(result.transition.tween("style.color"), "function");
   },
   "the last style operator takes precedence": function(result) {
-    assert.equal(result.selection.style("background-color"), "rgb(255,0,0)");
+    assert.equal(result.selection.style("background-color"), "#ff0000");
   },
   "sets a property as a string": function(result) {
-    assert.equal(result.selection.style("background-color"), "rgb(255,0,0)");
+    assert.equal(result.selection.style("background-color"), "#ff0000");
   },
   "sets a property as a function": function(result) {
-    assert.equal(result.selection.style("color"), "rgb(0,128,0)");
+    assert.equal(result.selection.style("color"), "#008000");
   },
   "observes the specified priority": function(result) {
     var style = result.selection.node().style;

diff --git a/test/core/transition-test-tween.js b/test/core/transition-test-tween.js
@@ -62,7 +62,7 @@ module.exports = {
       result.transition.each("end", function(d, i) { if (i >= 1) cb(null, result); });
     },
     "uses the returned tweener": function(result) {
-      assert.equal(result.selection[0][1].textContent, "hsl(230,50%,100%)");
+      assert.equal(result.selection[0][1].textContent, "#ffffff");
     },
     "does nothing if the tweener is falsey": function(result) {
       assert.equal(result.selection[0][0].textContent, "#ff0000");

diff --git a/test/env-assert.js b/test/env-assert.js
@@ -26,7 +26,7 @@ assert.rgbEqual = function(actual, r, g, b, message) {
 
 assert.hslEqual = function(actual, h, s, l, message) {
   if (Math.abs(actual.h - h) > 1e-6 || Math.abs(actual.s - s) > 1e-6 || Math.abs(actual.l - l) > 1e-6) {
-    assert.fail(actual+"", "hsl(" + h + "," + (s * 100) + "%," + (l * 100) + "%)", message || "expected {expected}, got {actual}", null, assert.hslEqual);
+    assert.fail("hsl(" + actual.h + "," + (actual.s * 100) + "%," + (actual.l * 100) + "%)", "hsl(" + h + "," + (s * 100) + "%," + (l * 100) + "%)", message || "expected {expected}, got {actual}", null, assert.hslEqual);
   }
 };
 

diff --git a/test/scale/linear-test.js b/test/scale/linear-test.js
@@ -39,15 +39,15 @@ suite.addBatch({
       },
       "can specify a polylinear domain and range": function(linear) {
         var x = linear().domain([-10, 0, 100]).range(["red", "white", "green"]);
-        assert.equal(x(-5), "rgb(255,128,128)");
-        assert.equal(x(50), "rgb(128,192,128)");
-        assert.equal(x(75), "rgb(64,160,64)");
+        assert.equal(x(-5), "#ff8080");
+        assert.equal(x(50), "#80c080");
+        assert.equal(x(75), "#40a040");
       },
       "an empty domain maps to the range start": function(linear) {
         var x = linear().domain([0, 0]).range(["red", "green"]);
-        assert.equal(x(0), "rgb(255,0,0)");
-        assert.equal(x(-1), "rgb(255,0,0)");
-        assert.equal(x(1), "rgb(255,0,0)");
+        assert.equal(x(0), "#ff0000");
+        assert.equal(x(-1), "#ff0000");
+        assert.equal(x(1), "#ff0000");
       }
     },
 
@@ -64,29 +64,29 @@ suite.addBatch({
       },
       "can specify range values as colors": function(linear) {
         var x = linear().range(["red", "blue"]);
-        assert.equal(x(.5), "rgb(128,0,128)");
+        assert.equal(x(.5), "#800080");
         var x = linear().range(["#ff0000", "#0000ff"]);
-        assert.equal(x(.5), "rgb(128,0,128)");
+        assert.equal(x(.5), "#800080");
         var x = linear().range(["#f00", "#00f"]);
-        assert.equal(x(.5), "rgb(128,0,128)");
+        assert.equal(x(.5), "#800080");
         var x = linear().range([d3.rgb(255,0,0), d3.hsl(240,1,.5)]);
-        assert.equal(x(.5), "rgb(128,0,128)");
+        assert.equal(x(.5), "#800080");
         var x = linear().range(["hsl(0,100%,50%)", "hsl(240,100%,50%)"]);
-        assert.equal(x(.5), "rgb(128,0,128)");
+        assert.equal(x(.5), "#800080");
       },
       "can specify range values as arrays or objects": function(linear) {
         var x = linear().range([{color: "red"}, {color: "blue"}]);
-        assert.deepEqual(x(.5), {color: "rgb(128,0,128)"});
+        assert.deepEqual(x(.5), {color: "#800080"});
         var x = linear().range([["red"], ["blue"]]);
-        assert.deepEqual(x(.5), ["rgb(128,0,128)"]);
+        assert.deepEqual(x(.5), ["#800080"]);
       }
     },
 
     "interpolate": {
       "defaults to d3.interpolate": function(linear) {
         var x = linear().range(["red", "blue"]);
         assert.equal(x.interpolate(), d3.interpolate);
-        assert.equal(x(.5), "rgb(128,0,128)");
+        assert.equal(x(.5), "#800080");
       },
       "can specify a custom interpolator": function(linear) {
         var x = linear().range(["red", "blue"]).interpolate(d3.interpolateHsl);
@@ -218,7 +218,7 @@ suite.addBatch({
         var x = linear().range(["red", "blue"]), y = x.copy();
         x.interpolate(d3.interpolateHsl);
         assert.equal(x(0.5), "#00ff00");
-        assert.equal(y(0.5), "rgb(128,0,128)");
+        assert.equal(y(0.5), "#800080");
         assert.equal(y.interpolate(), d3.interpolate);
       },
       "changes to clamping are isolated": function(linear) {

diff --git a/test/scale/log-test.js b/test/scale/log-test.js
@@ -48,9 +48,9 @@ suite.addBatch({
       },
       "can specify a polylog domain and range": function(log) {
         var x = log().domain([.1, 1, 100]).range(["red", "white", "green"]);
-        assert.equal(x(.5), "rgb(255,178,178)");
-        assert.equal(x(50), "rgb(38,147,38)");
-        assert.equal(x(75), "rgb(16,136,16)");
+        assert.equal(x(.5), "#ffb2b2");
+        assert.equal(x(50), "#269326");
+        assert.equal(x(75), "#108810");
       }
     },
 
@@ -67,29 +67,29 @@ suite.addBatch({
       },
       "can specify range values as colors": function(log) {
         var x = log().range(["red", "blue"]);
-        assert.equal(x(5), "rgb(77,0,178)");
+        assert.equal(x(5), "#4d00b2");
         var x = log().range(["#ff0000", "#0000ff"]);
-        assert.equal(x(5), "rgb(77,0,178)");
+        assert.equal(x(5), "#4d00b2");
         var x = log().range(["#f00", "#00f"]);
-        assert.equal(x(5), "rgb(77,0,178)");
+        assert.equal(x(5), "#4d00b2");
         var x = log().range([d3.rgb(255,0,0), d3.hsl(240,1,.5)]);
-        assert.equal(x(5), "rgb(77,0,178)");
+        assert.equal(x(5), "#4d00b2");
         var x = log().range(["hsl(0,100%,50%)", "hsl(240,100%,50%)"]);
-        assert.equal(x(5), "rgb(77,0,178)");
+        assert.equal(x(5), "#4d00b2");
       },
       "can specify range values as arrays or objects": function(log) {
         var x = log().range([{color: "red"}, {color: "blue"}]);
-        assert.deepEqual(x(5), {color: "rgb(77,0,178)"});
+        assert.deepEqual(x(5), {color: "#4d00b2"});
         var x = log().range([["red"], ["blue"]]);
-        assert.deepEqual(x(5), ["rgb(77,0,178)"]);
+        assert.deepEqual(x(5), ["#4d00b2"]);
       }
     },
 
     "interpolate": {
       "defaults to d3.interpolate": function(log) {
         var x = log().range(["red", "blue"]);
         assert.equal(x.interpolate(), d3.interpolate);
-        assert.equal(x(5), "rgb(77,0,178)");
+        assert.equal(x(5), "#4d00b2");
       },
       "can specify a custom interpolator": function(log) {
         var x = log().range(["red", "blue"]).interpolate(d3.interpolateHsl);
@@ -232,7 +232,7 @@ suite.addBatch({
         var x = log().range(["red", "blue"]), y = x.copy();
         x.interpolate(d3.interpolateHsl);
         assert.equal(x(5), "#00ffcb");
-        assert.equal(y(5), "rgb(77,0,178)");
+        assert.equal(y(5), "#4d00b2");
         assert.equal(y.interpolate(), d3.interpolate);
       },
       "changes to clamping are isolated": function(log) {

diff --git a/test/scale/pow-test.js b/test/scale/pow-test.js
@@ -39,9 +39,9 @@ suite.addBatch({
       },
       "can specify a polypower domain and range": function(pow) {
         var x = pow().domain([-10, 0, 100]).range(["red", "white", "green"]);
-        assert.equal(x(-5), "rgb(255,128,128)");
-        assert.equal(x(50), "rgb(128,192,128)");
-        assert.equal(x(75), "rgb(64,160,64)");
+        assert.equal(x(-5), "#ff8080");
+        assert.equal(x(50), "#80c080");
+        assert.equal(x(75), "#40a040");
       }
     },
 
@@ -66,21 +66,21 @@ suite.addBatch({
       },
       "can specify range values as colors": function(pow) {
         var x = pow().range(["red", "blue"]);
-        assert.equal(x(.5), "rgb(128,0,128)");
+        assert.equal(x(.5), "#800080");
         var x = pow().range(["#ff0000", "#0000ff"]);
-        assert.equal(x(.5), "rgb(128,0,128)");
+        assert.equal(x(.5), "#800080");
         var x = pow().range(["#f00", "#00f"]);
-        assert.equal(x(.5), "rgb(128,0,128)");
+        assert.equal(x(.5), "#800080");
         var x = pow().range([d3.rgb(255,0,0), d3.hsl(240,1,.5)]);
-        assert.equal(x(.5), "rgb(128,0,128)");
+        assert.equal(x(.5), "#800080");
         var x = pow().range(["hsl(0,100%,50%)", "hsl(240,100%,50%)"]);
-        assert.equal(x(.5), "rgb(128,0,128)");
+        assert.equal(x(.5), "#800080");
       },
       "can specify range values as arrays or objects": function(pow) {
         var x = pow().range([{color: "red"}, {color: "blue"}]);
-        assert.deepEqual(x(.5), {color: "rgb(128,0,128)"});
+        assert.deepEqual(x(.5), {color: "#800080"});
         var x = pow().range([["red"], ["blue"]]);
-        assert.deepEqual(x(.5), ["rgb(128,0,128)"]);
+        assert.deepEqual(x(.5), ["#800080"]);
       }
     },
 
@@ -124,7 +124,7 @@ suite.addBatch({
       "defaults to d3.interpolate": function(pow) {
         var x = pow().range(["red", "blue"]);
         assert.equal(x.interpolate(), d3.interpolate);
-        assert.equal(x(.5), "rgb(128,0,128)");
+        assert.equal(x(.5), "#800080");
       },
       "can specify a custom interpolator": function(pow) {
         var x = pow().range(["red", "blue"]).interpolate(d3.interpolateHsl);
@@ -238,7 +238,7 @@ suite.addBatch({
         var x = pow().range(["red", "blue"]), y = x.copy();
         x.interpolate(d3.interpolateHsl);
         assert.equal(x(0.5), "#00ff00");
-        assert.equal(y(0.5), "rgb(128,0,128)");
+        assert.equal(y(0.5), "#800080");
         assert.equal(y.interpolate(), d3.interpolate);
       },
       "changes to clamping are isolated": function(pow) {