Built with blockbuilder.org
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>