d3 Axis Bottom with Padding

Question

I want to display two xAxis at the bottom of my graph, one placed above the other. Hence in order to have my axes at the bottom, I specified .orient('bottom') on both x1Axis and x2Axis. Moreover, I set the transform property to translate(0, height) as can be seen below:

svg.append("g")
  .attr("class", "x1 axis")
  .attr("transform", "translate(0," + height + ")")
  .call(x1Axis);

for(var i = 0 ; i < x1domain.length; i++){
  svg.append("g")
      .attr("class", "x2 axis")
      .attr("transform", "translate("+ (x1.rangeBand()*i*(1/(1-x1padding))+ x1(x1domain[0])) + "," + height + ")")
      .call(x2Axis);
}

As expected, I ended up with both axes superposing like so:

Hence I modified x1Axis's transform property to translate(0, height-x) to move the axis up a bit. No matter the value of x (attempted {x | 1 <= x <= 20 } ), I was surprised to always obtain the following result:

Hence my question is, how can I have both axes at the bottom and one above the other? The behaviour seems to be predefined to clipping to top or bottom.

Note: For the sake of this discussion, ignore the fact that I am printing several axes for my x2Axis.

I don't find anything surprising here on one of the axis you are doing `translate(0, height-x)` so the axis has moved up. Doing translate will move the axis accordingly. — Cyril Cherian, May 21 '16 at 00:53
Well that would be the expected behaviour if I wrote `translate(0, height-height)` but in this case `translate(0, height-1)` yields the same result — Philippe Hebert, May 21 '16 at 00:55
And what is the value of `x`? As if it's greater than `height`, you'll get negative `translate's` second coordinate ie `translate(0, -200)`. — robjez, May 21 '16 at 12:00
This modified [fiddle](http://jsfiddle.net/7kd8kd9u/) from this [SO post](http://stackoverflow.com/questions/33233847/dual-x-axes-for-line-graphs-in-svg) reproduces the same behaviour. `xAxis2` is oriented to the bottom on line 28 and the translate property of the group is set on line 80. You'll observe the same behaviour as described above. — Philippe Hebert, May 21 '16 at 12:27

score 0 · Accepted Answer · answered May 22 '16 at 19:58

After playing around, I found out that the reason why putting height - 1 resulted in the second axis going to the top. The reason was that Javascript would try to type cast the start of the string to a number due to the presence of a minus sign and then add it to the height - 1, resulting in NaN as the value of the transform property.

Hence, from

.attr("transform", "translate(0," + height-1 + ")")

I changed it to

.attr("transform", "translate(0," + (height-1) + ")")

solving the type casting issue with the extra parentheses around height-1.

d3 Axis Bottom with Padding

1 Answers1