I am using D3 v4. I have a bar graph created with an x-axis using
scaleBand(). Now, I have created a y-axis but my issue is that no matter how I position it, it is cutting into the actual bars of the graph.
At the top of my JS file, I have:
var width = 350; var height = 300;
Then, the part where I actually create the Y-axis:
var y = d3.scaleLinear() .domain([0, 300000]) .rangeRound([height, 0]); var yAxis = d3.axisRight(y); yAxis.ticks(6); chart.append("g") .attr("class", "y axis") .attr("transform", "translate(" + (width - dist_from_right) + ", 0)") .call(yAxis);
As you can see from the picture, the axis stretches the entirety of the height of the SVG, from bottom to top meaning that half of the 0 gets cut off and half off the 300,000 gets cut off.
First question: how do I "squish" (or scale) the y-axis so that it displays within the confines of the SVG?
Next, I want to translate the y-axis so that it is not cutting into my red bar. If I try to use the
transform attribute, I can push the axis far to the right of the SVG borders but that means the numbers are off the SVG boundary. I've also tried to increase the
width variable but that does nothing because it just stretches out the x-axis proportionally.
Second question: how do I move the y-axis so that it is not cutting into the x-axis and red bar and also remains visible in the SVG window?