JSFiddle - React, Tailwind, and code Playground

by andrelaszlo

HTML

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

CSS

line.grid {
    stroke-width: 1px;
    stroke: black;
}

JavaScript

var D = 30; // Grid triangle side
var C = Math.sqrt(3 * Math.pow(D, 2)) // Grid parallel line distance
var SIZE = 500;

var svg = d3.select("svg");

var range = [0,1,2,3,4,5,6,7,8,9,10];

// Draw vertical grid

function vGridX(i) {
  return i*C+1;
}

function vGridY1(i) {
  return 0;
}

function vGridY2(i) {
  return SIZE;
}

var vGrid = svg.append("g");
var vGridLines = vGrid.selectAll("line")
    .data(range);

vGridLines.enter().append("line")
     .attr("class", "grid")
     .attr("x1", vGridX)
     .attr("x2", vGridX)
     .attr("y1", 0)
     .attr("y2", 100);