Crossfilter - 从 localStorage 加载 JSON 文件答案

【问题标题】：Crossfilter - Loading a JSON file from localStorageCrossfilter - 从 localStorage 加载 JSON 文件
【发布时间】：2018-07-04 12:07:00
【问题描述】：

我是 Javascript 的新手，我正在尝试使用保存在 localStorage 中的一些数据使用 d3.js 创建一个简单的条形图。

localStorage中的数据通过如下函数获取：

function logScore() {

var name = prompt("Please enter your name to add to the high scores list:");

var score = game.count;

var gameDate = today;

var scoreObj = { name: name, score: score, date: gameDate };

scoresArray.push(scoreObj);
window.localStorage.setItem('scoresRecord', JSON.stringify(scoresArray));
}

在一个单独的 Javascript 文件中，我解析 JSON 对象以便将对象存储在一个数组中。

var scoreData = JSON.parse(window.localStorage.getItem('scoresRecord'));

queue()
.defer(d3.json, "scoreData")
.await(makeGraph);

function makeGraph(error, scoreData) {

var ndx = crossfilter(scoreData);

var name_dim = ndx.dimension(dc.pluck('name'));
var score_dim = ndx.dimension(dc.pluck('score'));
var date_dim = ndx.dimension(dc.pluck('date'));

dc.barChart("#high-score-chart")
    .width(300)
    .height(150)
    .margins({ top: 10, right: 50, bottom: 30, left: 50 })
    .dimension(date_dim)
    .group(score_dim)
    .transitionDuration(500)
    .x(d3.scale.ordinal())
    .xUnits(dc.units.ordinal)
    .xAxisLabel("Date")
    .yAxisLabel("Score");

dc.renderAll();
}

加载后，我尝试使用交叉过滤器在 d3.js 条形图中使用数据，但我从控制台收到以下错误：

https://ifd-project-simon-georgefairbairn.c9users.io/scoreData404（未找到）

我想我正确地加载了数据，但我想知道是否有人可以让我知道我是否可以将 crossfilter 和 d3.js 与存储在 localStorage 中的 JSON 对象一起使用，如果可以，如何？

感谢您花时间阅读我的问题 - 希望有人能提供帮助！

【问题讨论】：

标签： json d3.js graph local-storage crossfilter

【解决方案1】：

如果您能够同步获取数据，从本地存储中加载，则不需要queue() 和d3.json

你应该可以的

var scoreData = JSON.parse(window.localStorage.getItem('scoresRecord'));
var ndx = crossfilter(scoreData);

您收到的错误表明d3.json 正在尝试对数据执行 HTTP 请求。在这种情况下，您不需要 d3.json，因为 JSON 解析是内置在语言中的。

如果您使用的是 CSV 数据，那么您可以使用同步解析版本 d3.csv.parse。没有d3.json.parse，因为它是由语言直接提供的。

【讨论】：