SVG中线图的双x-轴

Question

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

我的第一个问题是“D3.js或Dimple.js支持像box模型这样的双x轴吗？”

Answer 1

D3已经支持双x轴了.您可以根据需要多次调用d3.svg.axis()，创建任意数量的轴线。您需要通过transform=将它们定位为“转换(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);

这是一个有两个x轴的示例d3图，一个在顶部，一个在底部.

如果您希望在页面顶部和页面底部都有一个x轴，那么您可能希望为每个页面分别设置一个" top“和”axis.orient“，这样它们就不会进入图形区域。