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