Make toString return #RRGGBB for all colours.

This breaks a test case that ensures d3.hsl(x) == d3.hsl(d3.hsl(x)).

Fixes #333.
This commit is contained in:
Jason Davies 2011-10-07 17:40:58 +01:00
Родитель f70ab33e85
Коммит cc0ae766b7
18 изменённых файлов: 93 добавлений и 98 удалений

10
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) {

4
d3.min.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) {

Просмотреть файл

@ -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));
};
};

Просмотреть файл

@ -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");
}
}
});

Просмотреть файл

@ -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]});

Просмотреть файл

@ -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; });

Просмотреть файл

@ -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";

Просмотреть файл

@ -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", "");

Просмотреть файл

@ -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");
}
};

Просмотреть файл

@ -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;

Просмотреть файл

@ -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");

Просмотреть файл

@ -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);
}
};

Просмотреть файл

@ -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,21 +64,21 @@ 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"]);
}
},
@ -86,7 +86,7 @@ suite.addBatch({
"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) {

Просмотреть файл

@ -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,21 +67,21 @@ 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"]);
}
},
@ -89,7 +89,7 @@ suite.addBatch({
"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) {

Просмотреть файл

@ -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) {

Просмотреть файл

@ -39,9 +39,9 @@ suite.addBatch({
},
"can specify a polypower domain and range": function(sqrt) {
var x = sqrt().domain([-10, 0, 100]).range(["red", "white", "green"]);
assert.equal(x(-5), "rgb(255,75,75)");
assert.equal(x(50), "rgb(75,165,75)");
assert.equal(x(75), "rgb(34,145,34)");
assert.equal(x(-5), "#ff4b4b");
assert.equal(x(50), "#4ba54b");
assert.equal(x(75), "#229122");
}
},
@ -66,21 +66,21 @@ suite.addBatch({
},
"can specify range values as colors": function(sqrt) {
var x = sqrt().range(["red", "blue"]);
assert.equal(x(.25), "rgb(128,0,128)");
assert.equal(x(.25), "#800080");
var x = sqrt().range(["#ff0000", "#0000ff"]);
assert.equal(x(.25), "rgb(128,0,128)");
assert.equal(x(.25), "#800080");
var x = sqrt().range(["#f00", "#00f"]);
assert.equal(x(.25), "rgb(128,0,128)");
assert.equal(x(.25), "#800080");
var x = sqrt().range([d3.rgb(255,0,0), d3.hsl(240,1,.5)]);
assert.equal(x(.25), "rgb(128,0,128)");
assert.equal(x(.25), "#800080");
var x = sqrt().range(["hsl(0,100%,50%)", "hsl(240,100%,50%)"]);
assert.equal(x(.25), "rgb(128,0,128)");
assert.equal(x(.25), "#800080");
},
"can specify range values as arrays or objects": function(sqrt) {
var x = sqrt().range([{color: "red"}, {color: "blue"}]);
assert.deepEqual(x(.25), {color: "rgb(128,0,128)"});
assert.deepEqual(x(.25), {color: "#800080"});
var x = sqrt().range([["red"], ["blue"]]);
assert.deepEqual(x(.25), ["rgb(128,0,128)"]);
assert.deepEqual(x(.25), ["#800080"]);
}
},
@ -121,7 +121,7 @@ suite.addBatch({
"defaults to d3.interpolate": function(sqrt) {
var x = sqrt().range(["red", "blue"]);
assert.equal(x.interpolate(), d3.interpolate);
assert.equal(x(.5), "rgb(75,0,180)");
assert.equal(x(.5), "#4b00b4");
},
"can specify a custom interpolator": function(sqrt) {
var x = sqrt().range(["red", "blue"]).interpolate(d3.interpolateHsl);
@ -235,7 +235,7 @@ suite.addBatch({
var x = sqrt().range(["red", "blue"]), y = x.copy();
x.interpolate(d3.interpolateHsl);
assert.equal(x(0.5), "#00ffd3");
assert.equal(y(0.5), "rgb(75,0,180)");
assert.equal(y(0.5), "#4b00b4");
assert.equal(y.interpolate(), d3.interpolate);
},
"changes to clamping are isolated": function(sqrt) {

Просмотреть файл

@ -42,7 +42,7 @@ suite.addBatch({
var x = scale().domain([local(2009, 0, 1), local(2010, 0, 1)]).range(["red", "blue"]), y = x.copy();
x.interpolate(d3.interpolateHsl);
assert.equal(x(local(2009, 6, 1)), "#04ff00");
assert.equal(y(local(2009, 6, 1)), "rgb(129,0,126)");
assert.equal(y(local(2009, 6, 1)), "#81007e");
assert.equal(y.interpolate(), d3.interpolate);
},
"changes to clamping are isolated": function(scale) {