用於SVG線圖的雙x軸

Question

我已經開始使用D3.js和Dimple.js。我們的要求是創建一個雙x軸線圖。對這一要求進行基礎研究後，我發現D3.js或Dimple.js支持雙y軸，但不支持雙x軸。

我的第一個問題是「D3.js或Dimple.js是否支持像盒子模型一樣的雙x軸？」。

Answer 1

D3確實已經支持雙x軸。您可以根據需要多次調用d3.svg.axis（），以創建儘可能多的軸線。你需要放置它們通過變換=「翻譯（0，<一些價值>」，所以他們不重疊。

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 

var xAxis2 = d3.svg.axis() 
    .scale(x) 
    .orient("top"); 

    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0, 0)") 
     .call(xAxis2); 

下面是一個example d3 graph有兩個X軸，一個在頂部，一個在

如果你想在頁面的頂部和頁面的底部有一個x軸，你可能需要分別爲每一個設置「top」和「bottom」的axis.orient， t進入圖表區域