Built with blockbuilder.org
forked from Nohmapp's block: Color Selection Issue
license: mit |
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> |