使用正方形表示地图中的计数

至少有人知道这叫什么吗?

这在dataviz中的技术名称是 象形图 .

这是绘制矩形的通用代码,您必须根据需要更改某些部分。最重要的部分是矩形的计算 x 和 y modulo operator .

首先,让我们设置每个矩形的初始位置和大小。你必须根据你的坐标来设置这个。

var positionX = 5;
var positionY = 5;
var size = 5;

然后,让我们设置您想要多少矩形(在您的代码中,这将是 d.count ):

var count = 15;
var gridSize = Math.ceil(Math.sqrt(count));
var data = d3.range(count);

根据计数,我们设置 gridSize data .

现在我们绘制矩形:

var rects = svg.selectAll(".rects")
    .data(data)
    .enter()
    .append("rect");

rects.attr("width", size)
    .attr("height", size)
    .attr("x", function(d,i){ return positionX + (i%gridSize)*(size*1.1)})
    .attr("y", function(d,i){ return positionY + (Math.floor((i/gridSize)%gridSize))*(size*1.1) })
    .attr("fill", "red");

这里是一个工作片段,使用15作为计数(4、9、16、25等将给您一个完美的正方形)。改变 count 看看它是如何适应的:

var svg = d3.select("body")
	.append("svg")
	.attr("width", 50)
	.attr("height", 50);
	
var count = 15;
var size = 5;
var positionX = 5;
var positionY = 5;
var gridSize = Math.ceil(Math.sqrt(count));
var data = d3.range(count);

var rects = svg.selectAll(".rects")
	.data(data)
	.enter()
	.append("rect");
	
rects.attr("width", size)
	.attr("height", size)
	.attr("x", function(d,i){ return positionX + (i%gridSize)*(size*1.2)})
	.attr("y", function(d,i){ return positionY + (Math.floor((i/gridSize)%gridSize))*(size*1.2) })
	.attr("fill", "red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>