D3 only one Y-axis on right for plotting line chart

Question

I am trying to plot a D3 line chart, with its Y-axis on the right, instead of being on the left. I used var yAxis = d3.axisRight(y);, but this code snippet plots my

Answer 1

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>