如何在d3.js中使用叠加线在堆叠条形图上的x轴对齐

Question

I'm trying to create a stacked bar chart with a line graph over the top to show the relationship between total emissions and cost.

My example is here:

http://bl.ocks.org/4754261

As you can see from the chart, the dots of the line chart don't line up with the ticks on the bottom and thus don't line up nicely with the center of the bars.

I've been digging around quite a bit on google and I haven't been able to find something that helps me to solve my problem yet. Do I need a second x axis and if so what would it look like?

Oh, and if this is a bad or misleading way to show the relationship between cost and emissions, I'm receptive to other ideas.

Answer 1

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");