用于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进入图表区域