Question

我对Java语言还很陌生，我正尝试使用保存在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();
}

一旦加载，我便尝试使用Crossfilter在d3.js条形图中使用数据，但从控制台得到以下错误：

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

我认为我正在正确加载数据，但是我想知道是否有人可以让我知道是否可以对存储在localStorage中的JSON对象使用crossfilter和d3.js，如果可以，怎么办？

感谢您抽出宝贵的时间阅读我的问题-希望有人可以提供帮助！

Answer 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，因为它是由语言直接提供的。

Crossfilter-从localStorage加载JSON文件

1 个答案: