I'm new to protovis so amn't sure if I'm making a mistake or running
into a bug. I think the following code should show a line graph with a
horizontal rule at its base. Instead a vertical rule is added for
every point in the line. This is using protovis 3.2 on OS X in Safari
5 and Firefox 3.6. Strange behaviour is also seen when specifying
top(), left() or right(). If it is a bug I'll put it up on the
tracker.
Thanks,
Oliver.
var w = 150, h =150;
var tempScale = pv.Scale.linear(0, 12).range(0, h);
var tempVis = new pv.Panel()
.width(w)
.height(h)
.add(pv.Line)
.data([1, 1, 2, 3, 4, 2, 5, 7, 11])
.left(function() this.index * w/9)
.bottom(function(datum) tempScale(datum))
;
tempVis.add(pv.Rule)
.bottom(0);
> var w = 150, h =150; > var tempScale = pv.Scale.linear(0, 12).range(0, h); > var tempVis = new pv.Panel() > .width(w) > .height(h) > .add(pv.Line) > .data([1, 1, 2, 3, 4, 2, 5, 7, 11]) > .left(function() this.index * w/9) > .bottom(function(datum) tempScale(datum)) > ; > tempVis.add(pv.Rule) > .bottom(0);
> tempVis.render();
Note that tempVis refers to the pv.Line mark added to the panel, hence 'tempVis.add(pv.Rule)' will inherit the properties of the pv.Line mark, and so will inherit its 'data' property too and will show for every datum. It also inherits the 'left' property, which is why vertical rules are showing rather than a horizontal one. To fix this you probably want something like:
var tempVis = new pv.Panel() .width(w) .height(h);
Thanks for your post - I just had a lightbulb moment as a result! I'd
not properly grasped the how the property chaining mechanism returned
the final version as you pointed out. Thanks! Hopefully things will
click now.
Oliver.
On Sep 8, 4:37 pm, Jason Davies <ja...@jasondavies.com> wrote:
> Note that tempVis refers to the pv.Line mark added to the panel, hence 'tempVis.add(pv.Rule)' will inherit the properties of the pv.Line mark, and so will inherit its 'data' property too and will show for every datum. It also inherits the 'left' property, which is why vertical rules are showing rather than a horizontal one. To fix this you probably want something like:
> var tempVis = new pv.Panel()
> .width(w)
> .height(h);
