Crossfilter - загрузка файла JSON из localStorage - PullRequest
Новая
       24

Crossfilter - загрузка файла JSON из localStorage

0 голосов
/ 04 июля 2018

Я довольно новичок в Javascript и пытаюсь создать простую гистограмму с d3.js, используя некоторые данные, сохраненные в localStorage.

Данные в 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 / scoreData 404 (не найдено)

Я думаю, что я правильно загружаю данные, но мне было интересно, сможет ли кто-нибудь сообщить мне, могу ли я использовать crossfilter и d3.js с объектом JSON, хранящимся в localStorage, и если да, то как?

Спасибо, что нашли время прочитать мою проблему - надеясь, что кто-то может помочь!

1 Ответ

0 голосов
/ 05 июля 2018

Если вы можете получать данные синхронно, загружая их из локального хранилища, тогда вам не нужны 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 нет, поскольку он предоставляется непосредственно языком.

...