SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
const ROWS = 200;
const COLUMNS = 200;
const SIDE = 15;

const data = [];
for (let x = 0; x < ROWS; x++) {
  data.push([]);
  for (var y = 0; y < COLUMNS; y++)
    data[x].push({x, y, click: 0})
}

var grid = d3.select("#grid")
    .append("svg")
    .attr("width", "3000px")
    .attr("height", "3000px");

var row = grid.selectAll(".row")
    .data(data)
    .enter().append("g")
    .attr("class", "row");

var column = row.selectAll(".square")
    .data(function (d) { return d; })
    .enter().append("rect")
    .attr("class", "square")
    //.classed("tenth", function (d) { return d.x % 10 == 0 || d.y % 10 == 0; })
    .attr("x", function (d) { return d.x * SIDE; })
    .attr("y", function (d) { return d.y * SIDE; })
    .attr("width", function (d) { return SIDE; })
    .attr("height", function (d) { return SIDE; })
    .style("fill", "#bbb")
    .style("stroke", "#666")
    .on('click', function (d) {
        d.click ^= 1;
        d3.select(this).classed("gold", d.click);
    });

            
<html>

<head>
	<title>Gold</title>
</head>

<body>
	<div id="grid"></div>
</body>

</html>

            
.square {
    fill: #ccc
}

.square.tenth {
    fill: #bbb
}

.square.gold {
    fill: #d90
}

.square.turned {
    fill: #ea4
}

            

                
本项目引用的自定义外部资源