SVG 中线图的双 x 轴

Question

我已经开始研究 D3.js 和 Dimple.js。我们的要求是创建一个双 x 轴的线图。 Post基本研究了一下这个需求，发现D3.js或者Dimple.js支持双y轴，不支持双x轴。

我的第一个问题是"Does D3.js or Dimple.js support dual x-axes like box model?"。

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 轴的 example d3 graph，一个在顶部，一个在底部。

如果您想在页面顶部和页面底部设置 x 轴，您可能需要分别为每个设置 axis.orient 和 "top" 和 "bottom"所以他们不会进入图表区域。

SVG 中线图的双 x 轴

Dual x-axes for line-graphs in SVG

html

charts

svg

d3.js

dimple.js