Color Selection Issue

forked from Nohmapp's block: Color Selection Issue

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
const squareSize = 20,
gridSize = 25,
width = squareSize*gridSize,
height = squareSize*gridSize;

const svg = d3.select('body').append('svg')
            .attr('width', width)
            .attr('height', height)

const graphic = {

color: function(){
      const hue = (Math.random()*230) + 135,
      saturation = (Math.random()*20) + 46,
      lum = (Math.random()*20) + 55;
    },

buildData:function(){
      let result = [];
      for (let i = 0; i < gridSize; i++){
        let row = [];
        for(let j =0; j < gridSize; j++){
          row.push(Math.random().toFixed(1))
        }
        result.push(row)
      }
      console.log(result)
      return result;
    },

buildGrid: function(data){

const update = svg.selectAll('g')
        .data(data)

const enter = update.enter()
        .append('g')
        .attr('class', (d, i) => ("ger" + i))
        .attr("transform", function(d, i) {
          return "translate(" + (i * squareSize) + ', ' + 0  + ")" })

update.merge(enter)
        .selectAll('rect')
        .data((d) => {return d})
        .enter()
        .append('rect')
        .attr('class', 'square')
        .attr('y', (d, i) => {return i * squareSize})
        .attr('width', (d) => {return squareSize})
        .attr('height', (d) => {return squareSize})
        .attr('fill', (d) => {return d3.hcl(200, 50, (d*150))})
        .on('click', function (d) {
          //here's the problem
          //each of these log somehting differnet, I do not know what
          //is best for traversing the groups

// console.log(d3.select('rect').node())
          console.log(d3.select(this))
          console.log('this is, ', this.parentNode, 'd is = ', d)
         // console.log(d3.select('rect'));

var thissel = d3.select(this.parentNode)
           
          thissel.selectAll('rect').style('fill', 'red')
            //this line will convert the first square to red
            //despite where you click
         // d3.select(this.square).style('fill', 'red')
            //this line will log a d3 style selection
          	//but is undefined

})

const exit = update.exit().remove();
    },

propogate: function(){

}

graphic.buildGrid(graphic.buildData())

</script>
</body>

https://d3js.org/d3.v4.min.js