如何在d3.js中使用线条覆盖在堆叠条形图上排列x轴

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