score:7

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(d.property) + x.rangeBand() / 2;
    })
    .y(function(d) { return yCost(d.normalised_cost); })
    .interpolate("step-after");

Related Query