javascript - 使用 D3.js 加载本地数据以进行可视化

Question

我正在从事一个项目，该项目要求我可视化相当复杂的数据类型(请参阅 this older question)。简而言之，我有大量数据可以导出为 JSON、CSV 或其他任意平面格式，但我更愿意尽可能避免使用 XML(有关基础数据的详细说明，请参阅上面的链接问题)。

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

就 JSON 而言，我看过一个教程，其中解说员坚定地建议将 JSON 文件托管在网络服务器上，并使用 HTTP 请求而不是读取本地文件来获取它。我意识到这是由于跨域请求限制，我相信我必须以某种方式解决这个问题。在这一点上，我不确定如何进行，因为:

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

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

郑重声明，我已经尝试运行 python SimpleHTTPServer 模块进行尝试，再次一切正常。然后我尝试在生成的 HTML 报告中对数据进行硬编码，然后从我使用 D3 的脚本中调用 JSON 对象，

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

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

我该怎么做才能避免/解决这个问题？

Answer 1

要在不使用服务器的情况下加载数据本地文件，请将脚本标记附加到主体，并将源数据分配给您期望的变量或对象元素。在下面的示例中，我从 [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)