Draw a grid without labels and axis using d3 - d3.js

Question

I would like to create a vertical grid using D3.
I know I could use d3 axis methods (like axisBottom, axisLeft, ...) and set tickSize to manage the grid lines size but the axis generators create not only the lines but also the axis and the labels and I don't need them.
For example, this is what I could draw using axisBottom:
const container = d3.select('svg')
container.append('g').attr('class', 'vertical-grid')
const height = 100
const numberOfTicks = 5
const xScale = d3.scaleLinear()
.domain([0, 100])
.range([0, 200])
const xGridGenerator = d3.axisBottom(xScale)
.tickSize(height)
.ticks(numberOfTicks)
container
.select('.vertical-grid')
.attr('transform', `translate(${0}, ${0})`)
.call(xGridGenerator)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="app">
<svg></svg>
</div>
This is what I would like to draw:
I'm interested only in the red and blue lines, no labels, no axes.
I have the g container, the two scales and the number of ticks.
How can I do that?
Honestly I don't know how to start

Answer 1

You have a good start. A simple way to do the customization is to modify the axes' elements (labels, line colors, etc.) after you've added them. For example:
xAxis.selectAll('text').remove()
xAxis.selectAll('line').attr('stroke', 'blue')
Here's a complete example that renders a version of what you want (though the width/height are a little off because you'd want to have some margin):
const height = 200
const width = 200
const margin = { top: 10, bottom: 10, left: 10, right: 10 }
const container = d3.select('svg')
.attr('height', height)
.attr('width', width)
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`)
container.append('g').attr('class', 'vertical-grid')
container.append('g').attr('class', 'horizontal-grid')
const numberOfTicks = { x: 8, y: 4 }
const xScale = d3.scaleLinear()
.domain([0, 100])
.range([0, width - margin.left - margin.right ])
const xGridGenerator = d3.axisBottom(xScale)
.tickSize(height - margin.top - margin.bottom)
.ticks(numberOfTicks.x)
const xAxis = container
.select('.vertical-grid')
.attr('transform', `translate(${0}, ${0})`)
.call(xGridGenerator)
const yScale = d3.scaleLinear()
.domain([0, 100])
.range([0, height - margin.top - margin.bottom ])
const yGridGenerator = d3.axisRight(yScale)
.tickSize(width - margin.left - margin.right)
.ticks(numberOfTicks.y)
const yAxis = container
.select('.horizontal-grid')
.attr('transform', `translate(${0}, ${0})`)
.call(yGridGenerator)
// Customize
xAxis.selectAll('text').remove()
xAxis.selectAll('line').attr('stroke', 'blue')
yAxis.selectAll('text').remove()
yAxis.selectAll('line').attr('stroke', 'red')
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="app">
<svg></svg>
</div>