trouble with simple area fill

[anutron]

Hi all,

I'm actually new to protovis, so please, please pardon the total noob
question. I am having issues with a simple area chart where the area
is escaping the line I add. If I remove the line, the area renders
properly, but with the line, the area is simplified. Allow me to
illustrate:

http://cl.ly/2c63a8cfd95b6202da26

The area gets simplified into a straight line. If that line happens to
escape the top line, you see the clipping error. Here are some other
examples:

http://cl.ly/563775f2c122d199ac23
http://cl.ly/fbfac699d6f35bfc8d32 << barely visible

Here's my rather simple code:

var data = [...some numbers...];
var graph = new pv.Panel();
var w = 56,
h = 56;
var yScale = pv.Scale.linear(0, pv.max(data)).range(0, h);

graph.width(w)
.height(h)
.bottom(0)
.left(0)
.right(0)
.top(0)
.add(pv.Area)
.data(data)
.bottom(0)
.left(function(){ return this.index * (w/(data.length-1)); })
.height(function(d){ console.log(d, yScale(d)); return
yScale(d); })
.fillStyle("rgb(121,173,210)")
//if I stop here, I get an area that looks correct, but no top line of
course
.anchor("top")
.add(pv.Line)
.data(data)
.lineWidth(3);

graph.render();

Any help would be appreciated.

[Mike Bostock]

The added Line is inheriting the Area's fillStyle. Two possible fixes:

1. Add fillStyle(null) to override the inherited fill:

.add(pv.Line)
.fillStyle(null)
...

2. Anchor the line to the top of the area, rather than extending:

.anchor("top").add(pv.Line)
...

Mike