I am creating a grouped bar chart with d3 using the following example as my starting point. I've made a couple of minor modifications for readability as displayed in the screenshot below; the screenshot also demonstrates the issue I'm encountering.
I want to add a second y-axis but naturally I want it to be all the way over to the right. As you can see from the screenshot though it is to the right of the left-oriented y-axis but also adjacent to it instead of to the right of the data.
What I did to get where I am is to add the following (note orient("right")
)
var yRight = d3.svg.axis()
.scale(y)
.orient("right");
Then I applied the following append, even at the very end of the Javascript source code in case order matters, but to no avail. I based both things on how the (left) yAxis
was being handled, but clearly there is something further that needs doing in order to move the second y axis all the way to the right of the actual chart.
svg.append("g")
.attr("class", "y axis")
.call(yRight);
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.