Color squares of a grid JavaScript

Question

I am trying to implement the Gauss Formula Visually so I am having a little bit of problems with JavaScript since I never worked with it before. My question would be how do I color certain squares of my grid

    {
  const w = width, h = w * .6, mx = w/2 * margin, my = h/2 * margin;
  const s = DOM.svg(w, h);
  const path = `M${mx},${my}${gridPath(count+1, count, w - mx * 2, h - my * 2, false)}`;
  s.appendChild(svg``);
  s[0].sty
  return s;
}

and this is the function that computes the grid

    function gridPath(cols, rows, width = 1, height = 1, initPosition = true) {
  // Line distances.
  const sx = width / cols, sy = height / rows;
  // Horizontal and vertical path segments, joined by relative move commands.
  const px = Array(rows+1).fill(`h${width}`).join(`m${-width},${sy}`);
  const py = Array(cols+1).fill(`v${height}`).join(`m${sx},${-height}`);
  
  // Paths require an initial move command. It can be set either by this function
  // or appended to the returned path.
  return `${initPosition ? 'M0,0' : ''}${px}m${-width}${-height}${py}`;

}

user_15015675 · Answer

You need to create solid rectangles that could be filled.
Your script generates an array of lines – so you don't get any surface area.
Besides, all lines are currently defined as concatenated commands in a single element.

That's great for optimizing filesize – but you won't be able to select individual sub paths (grid lines).

Example 1: Svg markup for a 3x3 grid changing fill color on hover

svg {
  display: block;
  overflow: visible;
  width: 75vmin
}

path {
  fill: #fff;
  stroke-width: 1;
  stroke: #000
}

path:hover {
  fill: red
}

Example 2: Create grid svg dynamically. Set fill colors by class

let svg = document.querySelector('svg');
// generate grid svg
let gridSVG1 = gridPaths(4, 4, 100, 100, 0.25, '#ccc', true);

// highlight columns
highlightColumns(gridSVG1, ['1-2', '2-3', '3-4']);

function highlightColumns(svg, col_array) {
  col_array.forEach(function(colIndex, i) {
    // select
    let currentCol = svg.querySelector('.col-' + colIndex);
    currentCol.classList.add('highlight');
  })
}

function gridPaths(cols, rows, width = 1, height = 1, strokeWidth = 1, strokeColor = '#000', render = false) {
  let gridSvg = `
`;
  let offsetX = width / cols;
  let offsetY = height / rows;
  let currentRow = 1;
  let currentCol = 1;
  // add initial y/x offset according to stroke width to avoid cropped outer strokes
  let shiftX = 0;
  let shiftY = 0;
  let cellCount = cols * rows;
  for (let i = 0; i < cellCount; i++) {
    // if current index is divisible by columns – move to next row
    if (i > 0 && i % (cols) === 0) {
      shiftX = 0;
      shiftY += offsetY;
      currentCol = 1;
      currentRow++;
    }
    // add classnames for rows and columns to make each cell selectable
    let className = `col row-${currentRow} col-${currentCol} col-${currentRow}-${currentCol}`;

    // add new cell to output
    gridSvg += `
`;

    // increment x offset for next column
    shiftX += offsetX;
    currentCol++;
  }

  //close group
  gridSvg += '
';
  // create new svg
  let nameSpace = 'http://www.w3.org/2000/svg';
  let xlink = 'http://www.w3.org/1999/xlink';
  let gridSvgEl = document.createElementNS(nameSpace, 'svg');
  gridSvgEl.setAttribute('xmlns', nameSpace);
  gridSvgEl.setAttribute('xmlns:xlink', xlink);
  gridSvgEl.setAttribute('overflow', 'visible');
  // add stroke width to viewBox to avoid cropped outer strokes
  gridSvgEl.setAttribute('viewBox', [0, 0, width, height].join(' '));
  gridSvgEl.innerHTML = gridSvg;
  // optional: render grid
  if (render) {
    document.body.appendChild(gridSvgEl);
  }
  return gridSvgEl;
}

svg {
  display: block;
  overflow: visible;
  width: 75vmin
}

.row-3 {
  fill: #eee
}

.col-2 {
  fill: #fee
}

.col:hover,
.highlight {
  fill: lime
}

The gridPaths() function loops through the total amount of columns/cells. It also adds class names according to the current row and column index.
This way you can select individual columns and rows in css or js.
All paths are grouped in a element for styling – you could also style each column in css alone.

Color squares of a grid JavaScript

1 Answers

Example 1: Svg markup for a 3x3 grid changing fill color on hover

Example 2: Create grid svg dynamically. Set fill colors by class