用于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()来创建多个轴线.你需要通过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);

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

如果你想在页面的顶部和页面的底部有一个x轴,你可能想要分别为每个分别设置"top"和"bottom"的axis.orient,这样它们就不会进入图形区域.