数据可视化：在网格中绘制值的出现

现在我正试图在画布上绘制矩阵中每个出现在我阵列中的元素的矩形。对于定位，我使用数组中元素的经度和纬度值。数据可视化：在网格中绘制值的出现

假设我想在纽约市的一个正方形网格中绘制元素的出现。

由于这些元素的经度和纬度略有不同，所以我将不得不使用缩放来给出我想绘制一些空间的矩形（所以它看起来不像混沌簇）。因此，我用一个因子乘以rect()的x和y。

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

ctx.canvas.width = window.innerWidth; 
ctx.canvas.height = window.innerHeight; 

for (var i = 0; i < array.length; i++) { 
    var lat = array[i].latitude; 
    var lon = array[i].longitude; 

    ctx.rect(lat*10,(lon+200)*2, 4, 4); 
    ctx.stroke(); 
}

我的阵列看起来是这样的，包含100.000对象：

var modified_array = 
[{"city":"NYC","longitude":-73.935242,"latitude":40.730610}, 
{"city":"NYC","longitude":-74.044502,"latitude":40.689247}]

现在，它不会显示任何东西，我不知道我做错了什么......

上午我使用正确的方法绘制（方形）网格？

来源

2017-06-05 Unknown User

您的代码与我的完全相同。为了测试它，我指定了一个表格数组：

var array = [{latitude: 1.2, longitude: 1.3}]

也许这是你的html或者数组没有你期望的格式。

检查本例：https://codepen.io/anon/pen/mwyLMg

来源

2017-06-05 18:55:01 alpanagi

数据可视化：在网格中绘制值的出现

回答

相关问题