score:1

Accepted answer

Based on this other example I found my answer, and that was to add a transform/translate clause as follows:

svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + width + " ,0)")
    .call(yRight);

I'm completely new to d3 though so some explanation of what transform/translate do from d3 experts in the comments would definitely improve the quality of this Q&A.

score:0

Yes, as you found, .orient adjust the axis label positions, not the axis itself: "Changing the orientation affects the position of the ticks and their labels in relation to the axis path, but does not change the position of the axis itself; to change the position of the axis with respect to the plot, specify a transform attribute on the containing g element." mbostock wiki

The "transform", "translate" shifts all points by the X and Y values. This is an SVG command, not D3. So, your command

 .attr("transform", "translate(" + width + " ,0)")

moved the 2nd y-axis to the right by "width" pixels, like you wanted. Notice that you had already done the same thing with you x-axis:

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

You used transform to shift it down by "height" pixels. Without this translate, the x-axis would be along the top of the chart.

There are other useful transforms, like rotate, which can be used to rotate the axis labels. Useful when they are long and start overlapping each other. SVG doc transform


Related Query

More Query from same tag