charts - 如何使用 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");