如何在堆积条形图上排列x轴与d3.js中的线叠加

Question

我正在尝试在顶部创建一个带有折线图的堆积条形图,以显示总排放量和成本之间的关系.

我的例子在这里:

http://bl.ocks.org/4754261

从图表中可以看出,折线图的点不与底部的刻度对齐,因此不能与条的中心很好地对齐.

我一直在谷歌上挖掘相当多,我还没有找到能帮我解决问题的东西.我需要第二个x轴,如果是这样,它会是什么样子？

哦,如果这是显示成本和排放之间关系的一种不好或误导的方式,我会接受其他想法.

Answer 1

您需要将每个条的宽度的一半添加到线/点计算的x点.由于您已将每个条的宽度定义为x.rangeBand(),这意味着将x属性更改为:

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