in d3, no matter what axis generator you use...

  • axisbottom();
  • axistop();
  • axisright();
  • axisleft();

... the axes are always rendered at the origin, that is, (0,0). it's the very first line in the api:

regardless of orientation, axes are always rendered at the origin.

therefore, you have to translate the axis.

have a look at this demo. the first axis has no translate, the second one does:

var svg ="svg");
var scale = d3.scalelinear().range([10, 140]);
var axis = d3.axisright(scale);
var g1 = svg.append("g").call(axis);
var g2 = svg.append("g").attr("transform", "translate(270,0)").call(axis);
<script src=""></script>

Related Query

More Query from same tag