score:9

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 = d3.select("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="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>


Related Query

More Query from same tag