用于SVG中线图的双x轴 [英] Dual x-axes for line-graphs in SVG

问题描述

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

I have started to work on D3.js and Dimple.js. Our requirement is to create a line-graph with dual x-axes. Post basic research on this requirement, I found that D3.js or Dimple.js supports dual y-axes but not dual x-axes.

我的第一个问题是D3.js或Dimple.js是否支持双x轴像框模型？。

My first question is "Does D3.js or Dimple.js support dual x-axes like box model?".

推荐答案

D3支持双x轴。你可以调用d3.svg.axis（）多次，你想创建任意多的轴线，你想要的。您需要通过transform =translate（0，< some value>，以便它们不重叠。

D3 does support dual x-axes already. You can call d3.svg.axis() as many times as you want to create as many axes lines as you want. You'll need to position them via transform="translate(0, <some value>" so they don't overlap.

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);

这是一个 example d3 graph with two x-axis，one in the top and one in the bottom。

Here's an example d3 graph with two x-axes, one at the top and one at the bottom.

如果你想要一个x轴在页面的顶部和页面的底部，你可能需要设置axis.orient分别为top和bottom，因此他们不进入图形区域。

If you want an x-axis at the top of the page and bottom of the page you'll probably want to set axis.orient with "top" and "bottom" for each respectively so they don't go into the graph area.

这篇关于用于SVG中线图的双x轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！