Add horizontal lines on y-axis below labels - reactjs

Question

I have a scatter plot graph in my reactJS app using d3 and svg. I need to display horizontal lines on y-axis below the labels. Currently, the horizontal lines are appearing beside the labels.
here's my code:
const yAxis = d3.axisLeft(yScale).tickFormat(function(d) {
if (d != minYFloor)
return d + " yds";
else return "";
})
.tickSize(-width - 20, 0, 0);
tickSize function in above code renders horizontal lines in the graph like this:
This is my css:
.axisY line {
fill: none;
stroke: #fff;
opacity: 0.3;
shape-rendering: crispEdges;
}
While I need something like this:
How do I go about achieving that?

Answer 1

Here is a basic example of how you can translate the ticks in the axis.
Let's suppose this running snippet:
var svg = d3.select("svg");
var scale = d3.scalePoint()
.domain([0, 50, 100, 150, 200])
.range([140, 10]);
var axis = d3.axisLeft(scale)
.tickFormat(function(d) {
return d + " yds"
})
.tickSize(-250);
var g = svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(50,0)")
.call(axis);
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>
As you can see, it's a common y axis, just like yours.
To translate the ticks we first assign that axis'group a specific class (or ID):
.attr("class", "axis")
Then, we select the texts with the ticks class, and move them:
svg.selectAll(".axis .tick text")
.style("text-anchor", "start")
.attr("transform", "translate(4,-6)")
Here is the demo:
var svg = d3.select("svg");
var scale = d3.scalePoint()
.domain([0, 50, 100, 150, 200])
.range([140, 10]);
var axis = d3.axisLeft(scale)
.tickFormat(function(d) {
return d + " yds"
})
.tickSize(-250);
var g = svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(50,0)")
.call(axis);
svg.selectAll(".axis .tick text")
.style("text-anchor", "start")
.attr("transform", "translate(4,-6)")
.axis path {
stroke: none;
}
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>
Here I'm using magic numbers, change them accordingly.
Finally, there is an important advice: unlike what your question's title suggest, move the labels, not the lines. The lines are the actual indicator of the position to the users seeing the datavis.