我已经开始学习D3.js和Dimple.js。我们的需求是创建一个带有双x轴的线图。在对此要求进行基本研究后,我发现D3.js或Dimple.js支持双y轴,但不支持双x轴。
我的第一个问题是“D3.js或Dimple.js是否支持类似框模型的双x轴?”
D3已经支持双x轴了。您可以调用d3.svg.axis()无限制地创建多个坐标轴线。您需要通过transform="translate(0, <some value>"来定位它们,以避免重叠。
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);
这里有一个关于d3图形的示例,它有两个x轴,一个在顶部,一个在底部。
如果您想要一个在页面顶部和底部的x轴,您可能需要分别将axis.orient设置为"top"和"bottom",以便它们不会进入图形区域。