html - Dual x-axes for line-graphs in SVG

Question

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.

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

Answer 1

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

Here's an example d3 graph with two x-axes, one at the top and one at the 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.