如何創建堆積折線圖D3，多Y軸和普通X軸

Question

我正在創建一個折線圖，該折線圖將具有多個y軸，但是使用d3的普通x軸可以幫助我舉例說明如何創建它與D3庫。它應該像如下圖所示

Answer 1

很簡單：只需繪製兩個圖表，但只追加一個x軸，這裏有一個小提琴，讓你開始：http://jsfiddle.net/henbox/fg18eru3/1/

在這個例子中，我我們假設兩個不同的數據集具有不同的y域，但具有相同的x域。如果情況並非如此，您應該從兩個組合的x域中獲取最大值和最小值。

如果你開始通過定義將包含兩個圖表2個g元素，轉化底部圖表下來，使他們不重疊：

var topchart = svg.append("g").attr("class", "topchart"); 
var bottomchart = svg.append("g").attr("class", "bottomchart") 
    .attr("transform", "translate(0," + height/2 + ")"); 

...然後追加path和y軸到相應的g，但只添加x軸到底部圖表：

bottomchart.append("g") 
    .attr("class", "axis x-axis") 
    .attr("transform", "translate(0," + (height/2 - padding) + ")") 
    .call(xAxis);