Skip to content

Commit 4d1de5e

Browse files
mbostockmbostock
committed
Fix a bug in area step interpolation.
When computing the reversed baseline, we need to switch between step-before and step-after, since the points are in reverse order. Otherwise, we're effectively filling the gap between step-before and step-after.
1 parent fe61281 commit 4d1de5e

5 files changed

Lines changed: 33 additions & 22 deletions

File tree

‎d3.js‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3149,16 +3149,17 @@ function d3_svg_area(projection) {
31493149
x1 = d3_svg_lineX,
31503150
y0 = 0,
31513151
y1 = d3_svg_lineY,
3152-
interpolate = "linear",
3153-
interpolator = d3_svg_lineInterpolators[interpolate],
3152+
interpolate,
3153+
i0,
3154+
i1,
31543155
tension = .7;
31553156

31563157
function area(d) {
31573158
if (d.length < 1) return null;
31583159
var points0 = d3_svg_linePoints(this, d, x0, y0),
31593160
points1 = d3_svg_linePoints(this, d, x0 === x1 ? d3_svg_areaX(points0) : x1, y0 === y1 ? d3_svg_areaY(points0) : y1);
3160-
return "M" + interpolator(projection(points1), tension)
3161-
+ "L" + interpolator(projection(points0.reverse()), tension)
3161+
return "M" + i0(projection(points1), tension)
3162+
+ "L" + i1(projection(points0.reverse()), tension)
31623163
+ "Z";
31633164
}
31643165

@@ -3200,7 +3201,8 @@ function d3_svg_area(projection) {
32003201

32013202
area.interpolate = function(x) {
32023203
if (!arguments.length) return interpolate;
3203-
interpolator = d3_svg_lineInterpolators[interpolate = x];
3204+
i0 = d3_svg_lineInterpolators[interpolate = x];
3205+
i1 = i0.reverse || i0;
32043206
return area;
32053207
};
32063208

@@ -3210,9 +3212,12 @@ function d3_svg_area(projection) {
32103212
return area;
32113213
};
32123214

3213-
return area;
3215+
return area.interpolate("linear");
32143216
}
32153217

3218+
d3_svg_lineStepBefore.reverse = d3_svg_lineStepAfter;
3219+
d3_svg_lineStepAfter.reverse = d3_svg_lineStepBefore;
3220+
32163221
d3.svg.area = function() {
32173222
return d3_svg_area(Object);
32183223
};

‎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/svg/area.js‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,17 @@ function d3_svg_area(projection) {
33
x1 = d3_svg_lineX,
44
y0 = 0,
55
y1 = d3_svg_lineY,
6-
interpolate = "linear",
7-
interpolator = d3_svg_lineInterpolators[interpolate],
6+
interpolate,
7+
i0,
8+
i1,
89
tension = .7;
910

1011
function area(d) {
1112
if (d.length < 1) return null;
1213
var points0 = d3_svg_linePoints(this, d, x0, y0),
1314
points1 = d3_svg_linePoints(this, d, x0 === x1 ? d3_svg_areaX(points0) : x1, y0 === y1 ? d3_svg_areaY(points0) : y1);
14-
return "M" + interpolator(projection(points1), tension)
15-
+ "L" + interpolator(projection(points0.reverse()), tension)
15+
return "M" + i0(projection(points1), tension)
16+
+ "L" + i1(projection(points0.reverse()), tension)
1617
+ "Z";
1718
}
1819

@@ -54,7 +55,8 @@ function d3_svg_area(projection) {
5455

5556
area.interpolate = function(x) {
5657
if (!arguments.length) return interpolate;
57-
interpolator = d3_svg_lineInterpolators[interpolate = x];
58+
i0 = d3_svg_lineInterpolators[interpolate = x];
59+
i1 = i0.reverse || i0;
5860
return area;
5961
};
6062

@@ -64,9 +66,12 @@ function d3_svg_area(projection) {
6466
return area;
6567
};
6668

67-
return area;
69+
return area.interpolate("linear");
6870
}
6971

72+
d3_svg_lineStepBefore.reverse = d3_svg_lineStepAfter;
73+
d3_svg_lineStepAfter.reverse = d3_svg_lineStepBefore;
74+
7075
d3.svg.area = function() {
7176
return d3_svg_area(Object);
7277
};

‎test/svg/area-radial-test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ suite.addBatch({
136136
},
137137
"interpolate can be defined as a constant": function(area) {
138138
var a = area().interpolate("step-before");
139-
assert.pathEqual(a([[0, 0], [1, 1]]), "M0,0V-0.540302H0.841471L0,-1V0H0Z");
139+
assert.pathEqual(a([[0, 0], [1, 1]]), "M0,0V-0.540302H0.841471L0,-1H0V0Z");
140140
assert.equal(a.interpolate(), "step-before");
141141
},
142142

‎test/svg/area-test.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ suite.addBatch({
136136
},
137137
"interpolate can be defined as a constant": function(area) {
138138
var a = area().interpolate("step-before");
139-
assert.pathEqual(a([[0, 0], [1, 1]]), "M0,0V1H1L1,0V0H0Z");
139+
assert.pathEqual(a([[0, 0], [1, 1]]), "M0,0V1H1L1,0H0V0Z");
140140
assert.equal(a.interpolate(), "step-before");
141141
},
142142

@@ -157,8 +157,8 @@ suite.addBatch({
157157
},
158158

159159
"interpolate(step)": {
160-
"supports step-before interpolation": testInterpolation("step-before"),
161-
"supports step-after interpolation": testInterpolation("step-after")
160+
"supports step-before interpolation": testInterpolation("step-before", "step-after"),
161+
"supports step-after interpolation": testInterpolation("step-after", "step-before")
162162
},
163163

164164
"interpolate(basis)": {
@@ -178,12 +178,13 @@ suite.addBatch({
178178
});
179179

180180
// An area is just two lines, with one reversed.
181-
function testInterpolation(interpolate) {
181+
function testInterpolation(i0, i1) {
182+
if (arguments.length < 2) i1 = i0;
182183
return function(area) {
183-
var a = area().interpolate(interpolate),
184+
var a = area().interpolate(i0),
184185
d = [[0, 0], [1, 1], [2, 0], [3, 1], [4, 0]],
185-
l0 = d3.svg.line().interpolate(interpolate).x(a.x0()).y(a.y0()),
186-
l1 = d3.svg.line().interpolate(interpolate).x(a.x1()).y(a.y1());
186+
l0 = d3.svg.line().interpolate(i1).x(a.x0()).y(a.y0()),
187+
l1 = d3.svg.line().interpolate(i0).x(a.x1()).y(a.y1());
187188
assert.pathEqual(a(d), l1(d) + "L" + l0(d.reverse()).substring(1) + "Z");
188189
};
189190
}

0 commit comments

Comments
 (0)