Redraw DC JS Charts с новыми данными

Question

У меня есть данные из CSV в crossfilter, который выглядит следующим образом:

капот, комнаты, метка времени, цены, размещение

SF, 2-Br, 9/1 /14,3950,.94

загружаю свои данные, а затем настроить свои фильтры:

var ndx = crossfilter(data); 
var all = ndx.groupAll(); 

var price = ndx.dimension(function(d) { 
    return d.price; 
}); 

var occupancy = ndx.dimension(function(d) { 
    return d.occupancy 
}) 

var roomType = ndx.dimension(function (d) { 
    var room = d.rooms_clean; 
    return room; 
}); 

var dateDimension = ndx.dimension(function (d) { 
    return d.day; 
    });      

var hood = ndx.dimension(function (d) { //dimensions for choropleth 
    return d.hood; 
}); 

dataUnit = "price" 
var roomAll = roomType.group().reduce(reduceAddAvg(dataUnit), reduceRemoveAvg(dataUnit), reduceInitAvg) // create vector with stats by room type 
var hoodAll = hood.group().reduce(reduceAddAvg(dataUnit), reduceRemoveAvg(dataUnit), reduceInitAvg) // create vector with stats by hood 
var dateAll = dateDimension.group().reduce(reduceAddAvg(dataUnit), reduceRemoveAvg(dataUnit), reduceInitAvg) // create vector with stats by date 
var roomGroup = roomType.group();  

Все мои графики основаны на dataUnit = «цена». Я могу перезагрузить данные настройки страницыUnit = «занятость», и диаграммы отображают правильно.

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

$('#occupancy').click(function() { 

    roomType.dispose() 
    hood.dispose() 
    dateDimension.dispose() 

    dataUnit = "occupancy" 
    var roomAll = roomType.group().reduce(reduceAddAvg(dataUnit), reduceRemoveAvg(dataUnit), reduceInitAvg) // create vector with stats by room type 
    var hoodAll = hood.group().reduce(reduceAddAvg(dataUnit), reduceRemoveAvg(dataUnit), reduceInitAvg) // create vector with stats by hood 
    var dateAll = dateDimension.group().reduce(reduceAddAvg(dataUnit), reduceRemoveAvg(dataUnit), reduceInitAvg) // create vector with stats by date 
    var roomGroup = roomType.group();  

    dc.redrawAll();    
    return false; 
}) 

, но это только заставляет карту не обновлять. Как я могу изменить размер/данные, которые используют все кроссфелтеры, без перезагрузки страницы?

Answer 1

Похоже, что вы хотите оставить размеры в одиночку, но при необходимости заменять группы каждый раз, когда выбирается новый расчет.

Ваш котируемый код удаляет, но не воссоздает размеры; он создает новые группы, но не использует старые. Это не похоже на то, что вы хотите воссоздать размеры, поэтому те, кто выдает вызовы, вероятно, не очень хорошая идея.

Вам нужно будет назначить новые группы диаграммам. Просто создание объектов crossfilter не позволяет dc.js знать о них (и использование тех же переменных или имен переменных не означает, что они их подберут).

Сделайте chart.group(...) для каждого графика и его воссозданной группы, и вы увидите обновление. Вероятно, вы должны удалить старые группы, а не размеры.