d3.js 无法将加载的 json 数据分配给变量 [重复]答案

【问题标题】：d3.js cannot assign loaded json data to a variable [duplicate]d3.js 无法将加载的 json 数据分配给变量 [重复]
【发布时间】：2016-02-07 00:29:05
【问题描述】：

我正在尝试将一个外部 json 文件加载到 d3.js，但每次我尝试将加载的数据分配给一个变量（所以稍后我可以将它与 data(); 一起使用）它在 console.log 中给我 undefined .我觉得我尝试了所有方法，但我无法将数据分配给变量，不确定这里出了什么问题。

var dataset

function checkIt(data){
for (var i in data) {
            var data_clean;
            data_clean = data[i].Total
            dataset = data_clean

        }

        }
console.log(dataset)

d3.json("data.json", checkIt);

数据集

[
  {
    "Continent":"Europe",
    "Country_Names":"Albania",
    "Total":3.8
  },
  {
    "Continent":"Europe",
    "Country_Names":"Armenia",
    "Total":5.4
  },
  {
    "Continent":"Europe",
    "Country_Names":"Austria",
    "Total":64.7
  },
  {
    "Continent":"Europe",
    "Country_Names":"Azerbaijan",
    "Total":29.3
  }]

【问题讨论】：

标签： javascript json d3.js

【解决方案1】：

d3.json 是异步的（这意味着 checkIt 将在未来的事件框架中触发。不在当前的事件框架中）。您必须在 checkIt 函数内执行 console.log(dataset)，而不是在它之外。你现在调用它的地方发生在调用 checkIt 之前。

【讨论】：

但是当我稍后在 svg.selectAll("path").data(dataset);它给了我错误无法读取未定义的属性“长度”，我猜它与未读取的数据集有关？
在线查找异步 JavaScript。仅仅因为您稍后在代码中使用 svg.selectAll("path").data(dataset) 并不意味着它会在 d3.json 从服务器返回数据后发生。尝试将所有渲染逻辑放在 checkIt 中。如果您的服务器工作正常并且 d3.json 能够在光盘上找到文件，那么一切都应该顺利进行。您可以通过在 checkIt 函数中运行 console.log(data) 来测试是否从服务器获取数据。
试试这个。控制台.log('1'); setTimeout(function(){ console.log('3'); }, 0);控制台.log('2');这将说明您的代码中发生的情况。
d3 能够找到 json 文件，因为当我从 checkit 内部 console.log 时——> for 循环它呈现正确的值，我似乎无法在 checkit 之外获取值
你永远做不到。那就是异步 JavaScript。创建一个包含所有渲染逻辑的函数并在 checkIt 函数中调用它。

【解决方案2】：

为以后保存数据的一种更有效的方法是使用本地存储。在实践中可以这样使用：

function save() {
    savefile['userList'] = userList
    savefile['Users'] = Users
    savefile['qwerty'] = qwerty
    saved = LZString.compressToBase64(JSON.stringify(savefile))
    localStorage.setItem('puppy',saved);
    update();
};
function load() {
    savefile = JSON.parse(LZString.decompressFromBase64(localStorage.getItem('puppy')))
    Users = savefile.Users
    userList = savefile.userList
    qwerty = savefile.qwerty;
    title();
    update();
};
function autosave() {
    qwerty = qwerty + 1;
    save();
    setTimeout(autosave, 60000);
    update();
}

【讨论】：