Question

我正在尝试使用浏览器进行数据可视化练习，以绘制本地文本文件的内容。 html和txt都是本地的，仅用于原型设计/个人使用。

基本上，我想用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制作）：

enter image description here

我是javascript和HTML5 Canvas的完全初学者，所以我非常感谢我应该做什么，使用哪些功能等等。

没有必要提供完整的代码（但它会很好！），只是函数和概念的名称，这样我就可以从一堆“Hello Worlds”或任何东西中寻找教程并组装我的Frankenstein那样的。

感谢阅读！

Answer 1

TL; DR：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。（事实上，考虑到你从现在开始学习的所有数据vizualization 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

以下是如何将其分解为核心函数，然后在页面画布上呈现：http://bv.iriscouch.com/so/_design/ex/separate-function.html

（顺便说一下，试试iriscouch.com，它是互联网上最酷的东西之一，也是熟悉Javascript的好方法。下面的例子就在那里。sudo pip install couchapp，{{1} }，couchapp generate ex，cp *.js *.html ex/_attachments就是我提供这些示例的方式，完全免费.Windows安装程序here。）

如果您想查看重新格式化的基础数据，那就是here。

最后，你可以在http://aguacat.es

看到更多我个人的掌声

以上示例的内联：

cd ex && couchapp push https://user:pass@youraccount.iriscouch.com/somename

Answer 2

回应Heltonbiker。使用javascript在本地存储访问数据是非常可能的，例如，您可以创建一个json对象将其存储在var中并在本地保存文件。您的文件看起来像：

var jsonObject = {

    "priorities": [ [1,12], [4,2] ]
}

现在，如果您将本地文件包含在脚本的头部，那么：

<script type="text/javascript" language="javascript" src="priorities.json"></script>

现在我可以从存储在同一目录中的index.html访问数据来操作我的画布。

Jeffrey感谢您提供有用的文章我正在寻找一种方法从纯javascript中没有库的两个数据集中绘制plot，这是一些很好的信息：）

Answer 3

非常有可能！

您可以通过JavaScript通过xmlhttprequest对象读取本地文本文件，并使用正则表达式或类似方法解析其内容。

不幸的是，我对字符串解析并不是很好，但是我掀起了这个例子来加载文件并在画布上绘制圆圈。

的script.js：

var Visualizer =  {

    canvas      : document.getElementById("canvas"),
    context     : this.canvas.getContext("2d"),
    fileContents    : "",

    //Load a local file
    loadFile    : function(address) {
        var file = (window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
        if(file == null) {
            console.log("Error: XMLHttpRequest failed to initiate.");
        }
        file.onreadystatechange = function() {
            if (file.readyState == 4) { //Completed loading
                if (file.status == 200 || file.status == 0) {

                    //The responseText is the contents of the text file
                    fileContents = file.responseText;

                    Visualizer.onFileLoad();
                }
                else    //Otherwise, there was a problem while loading
                    console.log("Error " + file.status + " has occurred.");
            }
        }
        try {
            file.open("GET", address, true);
            file.send(null);

        } catch(e) {
            console.log("Error retrieving data file. Some browsers only accept cross-domain request with HTTP.");
        }

    },

    //Called when the xmlhttprequest object loads the file successfully
    onFileLoad  : function() {
        this.parseFile();
    },

    //Iterates through a file and draws circles
    parseFile   : function() {

        var x = 0;
        var y = 0;


        //~~~Create some method for parsing the text~~~

        var r = 100;
        var g = 100;
        var b = 255;

        var color = "rgba("+r+","+g+","+b+",1)";

        this.drawCircleAt(x+25, y+25, color);



    },


    //Draws circles with a 25 pixel diameter at the position specified.
    drawCircleAt    : function(x, y, color) {

        this.context.fillStyle = color;
        this.context.beginPath();
        this.context.arc(x, y, 25, 0, 6.283, false);
        this.context.fill();
        this.context.closePath();

    }


}

的index.html：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <canvas id="canvas" width="500" height="500">
        </canvas>
        <script type="text/Javascript" src="script.js"></script>
        <script>
            Visualizer.loadFile("file.txt");
            </script>
    </body>
</html>

如果您对代码有任何疑问，请随时联系。

使用HTML5 Canvas从本地csv“绘制”2d数组

3 个答案: