如何排隊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");