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