How to create svg with grid lines using d3.js?

1

<script src="https://d3js.org/d3.v7.min.js"></script>

1

<svg width="500" height="500"></svg>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

function createGrid(svg, width, height, gridSize) {
  const xGrid = d3.axisBottom()
    .scale(d3.scaleLinear().domain([0, width]).range([0, width]))
    .ticks(width / gridSize)
    .tickSize(-height)
    .tickFormat("");

  const yGrid = d3.axisRight()
    .scale(d3.scaleLinear().domain([0, height]).range([0, height]))
    .ticks(height / gridSize)
    .tickSize(-width)
    .tickFormat("");

  svg.append("g")
    .attr("class", "x-grid")
    .call(xGrid);

  svg.append("g")
    .attr("class", "y-grid")
    .call(yGrid);
}

1
2
3
4
5
6

const svg = d3.select("svg");
const width = 500;
const height = 500;
const gridSize = 50;

createGrid(svg, width, height, gridSize);

1
2
3
4
5
6
7

.x-grid line {
  stroke: #ccc;
}

.y-grid line {
  stroke: #ccc;
}