Как обновить графику d3 при загрузке с внешних данных? - PullRequest
Новая
       6

Как обновить графику d3 при загрузке с внешних данных?

0 голосов
/ 28 апреля 2018

Так что я не смог найти пример. Я загружаю этот огромный набор данных из внешнего файла с помощью D3, и я делаю график с некоторой частью данных. Когда ползунок перемещается, я хочу сделать тот же график с какой-то другой частью данных.

Я использовал d3.json () для загрузки данных. Проблема, с которой я сталкиваюсь, заключается в следующем: поскольку d3.json () является асинхронным, он загружает набор данных один раз, а затем я не могу получить к нему доступ из других функций. У меня не может быть другой функции обновления, которая создает новый график, так как я просто больше не могу получить доступ к данным.

Предложения других людей были "только с использованием данных в функции d3.json (): Как сохранить объект JSON, загруженный из файла? 

d3.json("temp.json", function(data){
    //use data here
})
// do not use data anymore

Я пытался использовать переменную для хранения данных (второй ответ по той же ссылке вопроса выше): 

var DATASET; // global

d3.json("file.json", function(data) {
    DATASET = data;
    //any other functions that depend on data
});

d3.selectAll().data(DATASET).......

И я не смог заставить его работать вообще, поскольку (я полагаю, это и есть причина) данные не были загружены в DATASET, когда последняя строка d3.data вызывает DATASET

Есть ли способ обновить внешние данные в d3? Должен ли я просто загрузить данные снова в моей функции обновления? Повлияет ли это на производительность, так как набор данных огромен?

Большое спасибо за ответ!

1 Ответ

0 голосов
/ 29 апреля 2018

Если вы хотите прочитать все данные один раз, вы должны сохранить их в вашей глобальной переменной DATASET, так же, как вы видите в фрагменте кода. Но вместо того, чтобы помещать логику обновления в ваш основной поток сценариев, поместите ее в функцию update(...) и вызовите ее из обратного вызова d3.json тоже ... что-то вроде этого (не проверено): 

var DATASET; // global

d3.json("file.json", function(data) {
    // data is loaded, save the full set
    DATASET = data;
    // filter the initial subset
    var subdata = data.filter(...);
    // now update the graph
    updateGraph(subdata);
});

function updateGraph(data) {
    // when invoked without any data, use the full dataset
    var newdata = (data == null ? DATASET : data);

    // data rendering logic starts here...
    d3.selectAll().data(newdata);
  ...
}

Это сохраняет полный набор данных в глобальной переменной, рисует начальный граф с отфильтрованным подмножеством данных, а также позволяет изменить данные, отображаемые с помощью другого фильтра, перед повторным вызовом функции.

...