13

我正在做一个需要我可视化相当复杂类型的数据的项目（请参阅这个较早的问题）。简而言之，我有大量数据可以导出为 JSON、CSV 或其他任意平面格式，尽管我更愿意尽可能避免使用 XML（有关基础数据的详细说明，请参阅上面的链接问题）。

我已经开始使用 D3 进行可视化，到目前为止，当我使用一些非常简单的数据进行测试时，我编写的布局似乎工作正常，这些数据我在 Javascript 中硬编码为数组。我在 D3 中阅读的有关数据绑定的教程有点令人困惑，因为有些使用 JSON，有些使用 TXT/CSV 格式，而另一些使用硬编码的数组/矩阵。

对于 JSON，我观看了一个教程，其中叙述者强烈建议将 JSON 文件托管在网络服务器上，并使用 HTTP 请求而不是读取本地文件来获取它。我意识到这是由于跨域请求限制，我相信我必须以某种方式解决。在这一点上，我不确定如何进行，因为：

  1. D3 驱动的可视化将出现在一系列 HTML 报告中，这些报告是作为我编写的分析工具的结果创建的。分析在用户计算机上完成，HTML 报告也在客户端本地创建。

  2. 目标用户绝对不是精通技术的，因此不能指示他们在他们的计算机上运行网络服务器以便能够通过 localhost 提供 JSON 或任何其他类型或资源

作为记录，我尝试运行 python SimpleHTTPServer 模块进行尝试，一切正常。然后我尝试在生成的 HTML 报告中对数据进行硬编码，然后从使用 D3 的脚本中调用 JSON 对象，

//d3.json("mydata.json", function(json){
d3.json(myjson, function(json){
    nodeData = json.elements;
....
}

这失败了，因为在这种情况下，我最终发送了一个 JSON 对象，而 D3.js 期待一个 URL。

我能做些什么来避免/解决这个问题？

4

6 回答 6

2

要在不使用服务器的情况下加载数据本地文件，请将脚本标记附加到正文，并将源数据分配给您期望的变量或对象元素。在下面的示例中，我从 [COUNTRY_ISO3CODE].js 文件加载某个国家/地区的数据。具体来说，阿富汗数据文件可能具有以下格式的内容：

data[AFG] = {"name": "Afghanistan", "estimate": 9.003, ... }

调用文件将具有以下内容：

if (!data[iso3]) { //only load the needed data-script as needed

    // if using jQuery
    $('body').append("<script type='text/javascript' src='jdb/"+ iso3 +".js'></script>")

    //If not using jQuery
    /*var script   = document.createElement("script");
    script.type  = "text/javascript";
    script.src   = "jdb/"+iso3+".js"; //?_="+ (new Date()); URL might have to be randomized to avoid cached data
    document.body.appendChild(script);
    */

    // call the data-handling function only after 
    // the desired data has fully loaded
    // in this case, I check every 100 milliseconds
    var intervalId = setInterval( function () {
        if (data[iso3]) {    //once data is detected, process data
            clearInterval(intervalId); //stop checking for data
            prepData(mainWrapper, iso3)
            drawCharts(mainWrapper, iso3)
        }
    }, 100)
}
else drawCharts(mainWrapper, iso3)
于 2012-07-24T04:41:16.620 回答
2

对于 JSON：

var data = JSON.parse(JavascriptStringVariableThatContainsJSON);

对于 CSV：

 var data = d3.csv.parseRows(JavascriptStringVariableThatContainsMyCSVdata);

//然后将数据添加到图形并调用回车，例如：

 var dataEnter = svg.selectAll("rect").data(data).enter();
于 2014-08-07T18:28:12.757 回答
2

因此，您想通过 FileReader 调用加载本地数据，以下内容取自Reading local files in JavaScript。但是，在上面的示例的基础上，此代码将图像文件加载到 svg 中，而不链接文件，而是实际将栅格数据插入到 svg 中。并随意用任何其他数据替换栅格数据，只需为其添加正确的处理...

首先关闭该<body>部分中的支持 html 元素：

<input type="file" id="files" name="files[]" multiple />

然后，您想将该<input ... />元素链接到该部分中的某些代码<script>：

document.getElementById('files').addEventListener('change', handleFileSelect, false);

现在在事件处理代码中读取文件背后的代码（现在在这种情况下，我想将本地图像加载到 D3JS svg 中）：

function handleFileSelect(evt) {
    reader = new FileReader();
    reader.onabort = function(e) {alert('File read cancelled');};
    var imageObj = new Image();  //image object to hold the local file contents.

    //and given the asynchronous nature, set up the event so that when the image is loaded, do something with it:
    imageObj.onload = function() {image.datum(imageObj.src).attr("xlink:href", function(d) {return d})};

    //similarly for the file reading:
    reader.onload = function(e) {imageObj.src = reader.result};

    //With all the events set up, lets start reading the file in.
    //the secret sauce is the DataURL
    reader.readAsDataURL(evt.target.files[0]);
}

为了完整起见，图像背后的 D3JS 酱汁：

var svg = d3.select("body").append("svg");

var image = svg.append("defs")
    .append("pattern")
    .attr("id", "venus")
    .attr('patternUnits', 'userSpaceOnUse')
    .attr("width", 200)
    .attr("height", 200)
    .append("image")
    .attr("width", 200)
    .attr("height", 200);

var image2 = svg.append("rect")
    .attr("x", "0")
    .attr("y", "0")
    .attr("width", 200)
    .attr("height", 200)
    .attr("fill", "url(#venus)");
于 2015-09-16T11:55:55.170 回答
1

如果您每次都生成 HTML，您可以将数据作为 JSON 放入您的 HTML 或您可以从 HTML 引用的 .js 文件中，可能通过生成的唯一 URL。

于 2012-07-11T02:06:08.270 回答
0

D3 有一些很棒的工具用于导入数据和操作它。过去一直提供 json 服务（有时创建起来很麻烦）我更倾向于提供 csv 并在 javascript/d3 中操作它，但有兴趣看看其他人如何回答你的问题。

这是一个简单的例子，在这里显示 csv 到嵌套的 json：https ://gist.github.com/3053667

还有很多用于操作数据的工具： https ://github.com/mbostock/d3/wiki/Arrays

如果你想切片和切块，还有交叉过滤器。看起来很值得掌握，但我正在等待假人指南出来！ http://square.github.com/crossfilter/

于 2012-07-11T00:02:30.330 回答
0

d3.json 通过 ajax 调用加载外部 json 文件 -myjson您示例中的变量已经是一个 javascript 对象，因此您无需加载它，只需在您的nodeData作业中直接使用它即可。

nodeData = myjson.elements;
于 2013-03-15T16:21:07.350 回答