You're seeing this behaviour because with your current code, you always pass 0 as an input value to wscale
. For the last li
element, end
is going to be the same as start
in your function to set the width
and therefore what you're passing to wscale
will be 0. The input domain of wscale
is determined as the extent of the input values and doesn't take this additional value into account.
You can easily fix this by changing how the domain is determined:
wscale.domain([0, d3.max(data,function(d){return d.v})]);
This assumes that all of your v
values are positive.
However, what you really want to do is take into account the differences between the values, as that's what you're passing to the scale. That is, the total sum of differences should be equal to the maximum width. You can compute this as follows.
var sumdiff = 0;
for(var i = 0; i < data.length - 1; i++) {
sumdiff += data[i+1].v - data[i].v;
}
Then the scale becomes
wscale.domain([0, sumdiff]);
Complete example here.