d3地圖上的象形圖：d3使用正方形表示計數

Question

這可能是一個簡單的問題，但我在d3中有一個地圖，我想將事件計數表示爲正方形。

下面是一個例子什麼我要去我爲巴布亞新幾內亞：

他們不是在圖片完全一致，但讓我們說我有一個JSON：

[ 
    {city:'New York', count:3}, 
    {city:'Washington, D.C.', count:1}, 
    {city:'Austin', count:5}, 
    {city:'Havana', count:8} 
] 

我希望將其表示爲正方形，最好按有序方式聚集。

我在這上面撓我的腦袋 - 我想也許是一個強制定向的圖表會做的伎倆？我也看到了這個：http://bl.ocks.org/XavierGimenez/8070956和這個：http://bl.ocks.org/mbostock/4063269可能會讓我接近。

對於上下文和設置（我不需要幫助製作地圖，但只是爲了分享），這裏是我用於該項目的回購：https://github.com/alex2awesome/custom-map，它顯示了我代表的舊方式計數（以每個城市爲中心的圓的半徑）。

Answer 1

有人至少知道這可能被稱爲什麼？

這個在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") 
 
\t .append("svg") 
 
\t .attr("width", 50) 
 
\t .attr("height", 50); 
 
\t 
 
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") 
 
\t .data(data) 
 
\t .enter() 
 
\t .append("rect"); 
 
\t 
 
rects.attr("width", size) 
 
\t .attr("height", size) 
 
\t .attr("x", function(d,i){ return positionX + (i%gridSize)*(size*1.2)}) 
 
\t .attr("y", function(d,i){ return positionY + (Math.floor((i/gridSize)%gridSize))*(size*1.2) }) 
 
\t .attr("fill", "red");

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