SVG中线图的双x轴

Question

我已经开始学习D3.js和Dimple.js。我们的需求是创建一个带有双x轴的线图。在对此要求进行基本研究后，我发现D3.js或Dimple.js支持双y轴，但不支持双x轴。

我的第一个问题是“D3.js或Dimple.js是否支持类似框模型的双x轴？”

- user3220129

Answer 1

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"，以便它们不会进入图形区域。

- Robert Longson

---

非常感谢。这正是我一直在寻找的东西。 - user3220129

Dimple也支持2个x轴，只需将2个轴添加到x即可。例如，添加2个类别轴：myChart.addCategoryAxis("x", "我的第一个x轴维度"); myChart.addCategoryAxis("x", "我的第二个x轴维度"); - John Kiernander