Accepted answer

you need to add on half the width of each bar to the x point of your line/dot calculation. as you've defined the width of each bar to be x.rangeband(), this would mean changing the x property to something like:

var valueline = d3.svg.line()
    .x(function(d) {
        return x( + x.rangeband() / 2;
    .y(function(d) { return ycost(d.normalised_cost); })

Related Query

More Query from same tag