我正在尝试使用浏览器进行数据可视化练习，以绘制本地文本文件的内容。 html 和 txt 都是本地的，仅供原型(prototype)制作/个人使用。
基本上，我想使用 javascript 来读取这样的文件:
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0
0.0, 0.2, 0.3, 0.3, 0.3, 0.2, 0.0
0.0, 0.3, 0.5, 0.6, 0.5, 0.3, 0.0
0.0, 0.3, 0.6, 0.8, 0.6, 0.3, 0.0
0.0, 0.3, 0.5, 0.6, 0.5, 0.3, 0.0
0.0, 0.2, 0.3, 0.3, 0.3, 0.2, 0.0
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0
并呈现为彩色圆圈的正方形网格。 txt 中的每个值都是对应圆圈的不透明度，如下所示(使用 Python、Numpy、Cairo 和 PIL 制作):
我是 javascript 和 HTML5 Canvas 的完全初学者，所以我非常希望能提供一些线索，告诉我应该做什么、使用哪些函数等。
没有必要给出完整的代码(但它会更好!)，只是功能和概念的名称，这样我就可以查找教程并从一堆“Hello Worlds”或任何东西中组装我的弗兰肯斯坦就像那样。
感谢阅读!
最佳答案
长话短说:http://bv.iriscouch.com/so/_design/ex/index.html和 http://bv.iriscouch.com/so/_design/ex/separate-function.html
这是一个稍微冗长的回答，但我觉得我不久前就站在你的立场上，并且会从下面的一些建议中受益。因为您提到了那些 Python 库，所以我将使用 Python 类比来定位它。还想提一下:我喜欢低级的东西，我喜欢示波器、C 等，但是 javascript 美丽的、低级的核心是它的对象和函数——浏览器环境是一片丛林，我更快乐，因为尽可能多地交给 jQuery 和 Underscore.js。
首先，关于 csv 格式，如果这是绝对要求，请使用 d3.js 中的 d3.csv 之类的东西图书馆。 (事实上 ，将您从现在开始学习的所有数据可视化 javascript 视为准备尽可能从 Mike Bostock 的想象中复制。)但是在 Javascript 中询问 csv 有点像问“我是亚洲新手，四川哪里吃寿司最好？”答案:“你是 in Sichuan!!!”。使用 json。在你的情况下，在 python 中我会这样做:
>>> f = open('sample.csv').readlines()
>>> rv = json.dumps([[float(i) for i in k.split(',')] for k in f])
>>> file_out.write(rv)
这里是你如何在一件作品中做到这一点:http://bv.iriscouch.com/so/_design/ex/index.html
以下是您如何将其分解为核心功能，然后在页面的 Canvas 上呈现:http://bv.iriscouch.com/so/_design/ex/separate-function.html
(顺便说一下，试试 iriscouch.com ，它是互联网上最酷的东西之一，也是熟悉 Javascript 的好方法。下面的例子就在那里。sudo pip install couchapp， couchapp 生成 ex, cp *.js *.html ex/_attachments, cd ex && couchapp push https://user:pass@youraccount.iriscouch.com/somename 是我放置这些示例的方式，完全免费。Windows 安装程序 here 。)
如果您想查看重新格式化后的基础数据，那就是 here .
最后，您可以在 http://aguacat.es 上看到更多我个人的婴儿步。
上面例子的内联:
<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<canvas id="circles" height="700" width="700"></canvas>
<script>
// $ is just a function. It makes dealing with the
// browser itself less annoying. Call it with a
// function as argument. The function has no
// name, like a python lambda, and it will
// request the json and process it.
$(function () {
var the_color = "rgba(0,0,255,alpha_token)";
// ask for the json and register the following
// function (second argument to getJSON) to be called
// once it is delivered:
$.getJSON('json_from_csv.json', function(data) {
// no more jquery for now
var canvas = document.getElementById("circles");
// you declare these to avoid them being global variables:
var h, w, column_width, column_height, x_pos, y_pos, radius;
h = canvas.height;
w = canvas.width;
column_width = w / data[0].length;
column_height = h / data.length;
// we're working in 2 dimensions:
var context = canvas.getContext('2d');
radius = column_width / 2;
data.forEach(function (row, row_index) {
row.forEach(function (entry, column_index) {
x_pos = column_index * column_width + radius;
y_pos = row_index * column_height + radius;
context.moveTo(x_pos, y_pos);
context.beginPath();
context.arc(x_pos, y_pos, radius, 0, Math.PI*2)
context.fillStyle = the_color.replace(/alpha_token/, entry);
context.strokeStyle = the_color.replace(/alpha_token/, entry);
context.fill();
context.stroke();
context.closePath();
});
});
});
});
</script>
</body>
</html>
关于javascript - 使用 HTML5 Canvas 从本地 csv 到 "plot"二维数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8419408/