Skip to content

Commit cc0ae76

Browse files
jasondaviesjasondavies
committed
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.
1 parent f70ab33 commit cc0ae76

18 files changed

Lines changed: 93 additions & 98 deletions

‎d3.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -780,10 +780,10 @@ d3.interpolateRgb = function(a, b) {
780780
bg = b.g - ag,
781781
bb = b.b - ab;
782782
return function(t) {
783-
return "rgb(" + Math.round(ar + br * t)
784-
+ "," + Math.round(ag + bg * t)
785-
+ "," + Math.round(ab + bb * t)
786-
+ ")";
783+
return "#"
784+
+ d3_rgb_hex(Math.round(ar + br * t))
785+
+ d3_rgb_hex(Math.round(ag + bg * t))
786+
+ d3_rgb_hex(Math.round(ab + bb * t));
787787
};
788788
};
789789

@@ -1180,7 +1180,7 @@ d3_Hsl.prototype.rgb = function() {
11801180
};
11811181

11821182
d3_Hsl.prototype.toString = function() {
1183-
return "hsl(" + this.h + "," + this.s * 100 + "%," + this.l * 100 + "%)";
1183+
return this.rgb().toString();
11841184
};
11851185

11861186
function d3_hsl_rgb(h, s, l) {

‎d3.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/core/hsl.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ d3_Hsl.prototype.rgb = function() {
2929
};
3030

3131
d3_Hsl.prototype.toString = function() {
32-
return "hsl(" + this.h + "," + this.s * 100 + "%," + this.l * 100 + "%)";
32+
return this.rgb().toString();
3333
};
3434

3535
function d3_hsl_rgb(h, s, l) {

‎src/core/interpolate.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -102,10 +102,10 @@ d3.interpolateRgb = function(a, b) {
102102
bg = b.g - ag,
103103
bb = b.b - ab;
104104
return function(t) {
105-
return "rgb(" + Math.round(ar + br * t)
106-
+ "," + Math.round(ag + bg * t)
107-
+ "," + Math.round(ab + bb * t)
108-
+ ")";
105+
return "#"
106+
+ d3_rgb_hex(Math.round(ar + br * t))
107+
+ d3_rgb_hex(Math.round(ag + bg * t))
108+
+ d3_rgb_hex(Math.round(ab + bb * t));
109109
};
110110
};
111111

‎test/core/hsl-test.js‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ suite.addBatch({
3232
color.h++;
3333
color.s += .1;
3434
color.l += .1;
35-
assert.equal(color + "", "hsl(181,60%,70%)");
35+
assert.equal(color + "", "#85dfe0");
3636
},
3737
"parses hexadecimal shorthand format (e.g., \"#abc\")": function(hsl) {
3838
assert.hslEqual(hsl("#abc"), 210, .25, .733333);
@@ -72,14 +72,9 @@ suite.addBatch({
7272
assert.hslEqual(hsl("lightsteelblue").darker(1), 213.913043, .4107143, .5462745);
7373
assert.hslEqual(hsl("lightsteelblue").darker(2), 213.913043, .4107143, .38239216);
7474
},
75-
"string coercion returns HSL format": function(hsl) {
76-
var re = /^hsl\([0-9]+(.[0-9]+)?,[0-9.]+%,[0-9.]+%\)$/;
77-
assert.match(hsl("#abcdef"), re);
78-
assert.match(hsl("moccasin"), re);
79-
assert.strictEqual(hsl("hsl(60, 100%, 20%)") + "", "hsl(60,100%,20%)");
80-
assert.match(hsl("rgb(12, 34, 56))"), re);
81-
assert.match(hsl(d3.rgb(12, 34, 56)), re);
82-
assert.strictEqual(hsl(d3.hsl(60, 1, .2)) + "", "hsl(60,100%,20%)");
75+
"string coercion returns RGB format": function(hsl) {
76+
assert.strictEqual(hsl("hsl(60, 100%, 20%)") + "", "#666600");
77+
assert.strictEqual(hsl(d3.hsl(60, 1, .2)) + "", "#666600");
8378
}
8479
}
8580
});

‎test/core/interpolate-test.js‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ suite.addBatch({
1515
assert.equal(interpolate(2, 12)(.4), 6);
1616
},
1717
"interpolates colors": function(interpolate) {
18-
assert.equal(interpolate("#abcdef", "#fedcba")(.4), "rgb(204,211,218)");
18+
assert.equal(interpolate("#abcdef", "#fedcba")(.4), "#ccd3da");
1919
},
2020
"interpolates strings": function(interpolate) {
2121
assert.equal(interpolate("width:10px;", "width:50px;")(.2), "width:18px;");
@@ -83,22 +83,22 @@ suite.addBatch({
8383
return d3.interpolateRgb;
8484
},
8585
"parses string input": function(interpolate) {
86-
assert.equal(interpolate("steelblue", "#f00")(.2), "rgb(107,104,144)");
87-
assert.equal(interpolate("steelblue", "#f00")(.6), "rgb(181,52,72)");
86+
assert.equal(interpolate("steelblue", "#f00")(.2), "#6b6890");
87+
assert.equal(interpolate("steelblue", "#f00")(.6), "#b53448");
8888
},
8989
"parses d3.rgb input": function(interpolate) {
90-
assert.equal(interpolate(d3.rgb("steelblue"), "#f00")(.2), "rgb(107,104,144)");
91-
assert.equal(interpolate("steelblue", d3.rgb(255, 0, 0))(.6), "rgb(181,52,72)");
90+
assert.equal(interpolate(d3.rgb("steelblue"), "#f00")(.2), "#6b6890");
91+
assert.equal(interpolate("steelblue", d3.rgb(255, 0, 0))(.6), "#b53448");
9292
},
9393
"parses d3.hsl input": function(interpolate) {
94-
assert.equal(interpolate(d3.hsl("steelblue"), "#f00")(.2), "rgb(107,104,144)");
95-
assert.equal(interpolate("steelblue", d3.hsl(0, 1, .5))(.6), "rgb(181,52,72)");
94+
assert.equal(interpolate(d3.hsl("steelblue"), "#f00")(.2), "#6b6890");
95+
assert.equal(interpolate("steelblue", d3.hsl(0, 1, .5))(.6), "#b53448");
9696
},
9797
"interpolates in RGB color space": function(interpolate) {
98-
assert.equal(interpolate("steelblue", "#f00")(.2), "rgb(107,104,144)");
98+
assert.equal(interpolate("steelblue", "#f00")(.2), "#6b6890");
9999
},
100100
"outputs an RGB string": function(interpolate) {
101-
assert.equal(interpolate("steelblue", "#f00")(.2), "rgb(107,104,144)");
101+
assert.equal(interpolate("steelblue", "#f00")(.2), "#6b6890");
102102
}
103103
}
104104
});
@@ -162,10 +162,10 @@ suite.addBatch({
162162
assert.deepEqual(interpolate(new a(2), new a(4))(.5), {a: 3, b: 12});
163163
},
164164
"interpolates color properties as rgb": function(interpolate) {
165-
assert.deepEqual(interpolate({background: "red"}, {background: "green"})(.5), {background: "rgb(128,64,0)"});
166-
assert.deepEqual(interpolate({fill: "red"}, {fill: "green"})(.5), {fill: "rgb(128,64,0)"});
167-
assert.deepEqual(interpolate({stroke: "red"}, {stroke: "green"})(.5), {stroke: "rgb(128,64,0)"});
168-
assert.deepEqual(interpolate({color: "red"}, {color: "green"})(.5), {color: "rgb(128,64,0)"});
165+
assert.deepEqual(interpolate({background: "red"}, {background: "green"})(.5), {background: "#804000"});
166+
assert.deepEqual(interpolate({fill: "red"}, {fill: "green"})(.5), {fill: "#804000"});
167+
assert.deepEqual(interpolate({stroke: "red"}, {stroke: "green"})(.5), {stroke: "#804000"});
168+
assert.deepEqual(interpolate({color: "red"}, {color: "green"})(.5), {color: "#804000"});
169169
},
170170
"interpolates nested objects and arrays": function(interpolate) {
171171
assert.deepEqual(interpolate({foo: [2, 12]}, {foo: [4, 24]})(.5), {foo: [3, 18]});

‎test/core/selection-attr-test.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,8 +91,8 @@ suite.addBatch({
9191
},
9292
"sets an attribute as a function of data": function(div) {
9393
div.attr("bgcolor", d3.interpolateRgb("brown", "steelblue"));
94-
assert.equal(div[0][0].getAttribute("bgcolor"), "rgb(165,42,42)");
95-
assert.equal(div[0][1].getAttribute("bgcolor"), "rgb(70,130,180)");
94+
assert.equal(div[0][0].getAttribute("bgcolor"), "#a52a2a");
95+
assert.equal(div[0][1].getAttribute("bgcolor"), "#4682b4");
9696
},
9797
"sets an attribute as a function of index": function(div) {
9898
div.attr("bgcolor", function(d, i) { return "color-" + i; });

‎test/core/selection-property-test.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,8 @@ suite.addBatch({
5858
},
5959
"sets a property as a function": function(div) {
6060
div.property("bgcolor", d3.interpolateRgb("brown", "steelblue"));
61-
assert.equal(div[0][0].bgcolor, "rgb(165,42,42)");
62-
assert.equal(div[0][1].bgcolor, "rgb(70,130,180)");
61+
assert.equal(div[0][0].bgcolor, "#a52a2a");
62+
assert.equal(div[0][1].bgcolor, "#4682b4");
6363
},
6464
"gets a property value": function(div) {
6565
div[0][0].bgcolor = "purple";

‎test/core/selection-style-test.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,8 @@ suite.addBatch({
6262
},
6363
"sets a property as a function": function(div) {
6464
div.style("background-color", d3.interpolateRgb("orange", "yellow"));
65-
assert.equal(div[0][0].style["background-color"], "rgb(255,165,0)");
66-
assert.equal(div[0][1].style["background-color"], "rgb(255,255,0)");
65+
assert.equal(div[0][0].style["background-color"], "#ffa500");
66+
assert.equal(div[0][1].style["background-color"], "#ffff00");
6767
},
6868
"gets a property value": function(div) {
6969
div[0][0].style.setProperty("background-color", "green", "");

‎test/core/transition-test-attr.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,6 @@ module.exports = {
2828
assert.equal(result.selection.attr("width"), "200");
2929
},
3030
"sets an attribute as a function": function(result) {
31-
assert.equal(result.selection.attr("color"), "rgb(0,128,0)");
31+
assert.equal(result.selection.attr("color"), "#008000");
3232
}
3333
};

0 commit comments

Comments
 (0)