dc.js изменить временную шкалу оси x после фильтрации

Question

Я фильтрую по дате график временных рядов dc.js программно после нажатия кнопки. Я хочу, чтобы ось X, представляющая шкалу времени, изменилась, когда мой фильтр данных применяется. Вместо этого оси остаются прежними, хотя график падает по обе стороны от даты. Моя ситуация может быть продемонстрирована с помощью jsfiddle, созданного в другом вопросе ( добавление фильтра в dc.js / Crossfilter без обновления диаграммы) Мне не ясно, был ли дан ответ на этот вопрос, но предложенный jsfiddle демонстрирует проблему, с которой я столкнулся: http://jsfiddle.net/PYeFP/5/

Вы можете видеть, что при нажатии на кнопку фильтра данные фильтруются соответствующим образом, но xAxis содержит тот же диапазон значений.
Я попытался воссоздать шкалу x и присвоить ей свойство x для диаграммы: getCompositeDemandLine(). X (xScale); //xScale содержит новые минимальные, максимальные даты

но это не имело никакого эффекта.

Есть ли способ заставить домен диаграммы измениться при фильтрации? Если нет, есть ли способ удалить диаграмму, чтобы ее можно было воссоздать?

var data = [ { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7c4" }, "start" : { "$date" : 1361459258000 }, "tripId" : "29WUKABDBUC5", "os" : "iPhone OS 6.1", "device" : "iPhone 4", "length" : 10.02666666666667, "overdue" : 8.137777777777778, "status" : "COMPLETED", "vessel" : "GalataSaray", "clientVersion" : "1.0.58" } , { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7c5" }, "start" : { "$date" : 1361526164000 }, "tripId" : "5N3FXDFN4XWL", "os" : "Android 3.0.31", "device" : "Nexus S", "length" : -0.9272222222222222, "overdue" : -2.010833333333333, "status" : "COMPLETED", "vessel" : "Mornington Missile", "clientVersion" : "1.23" } , { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7c6" }, "start" : { "$date" : 1361718973000 }, "tripId" : "GYPWNTJLEYYQ", "os" : "Android 3.0.15", "device" : "GT-I9300", "length" : -1.001388888888889, "overdue" : -3.221388888888889, "status" : "COMPLETED", "vessel" : "Mornington Missile", "clientVersion" : "1.23" } , { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7c7" }, "start" : { "$date" : 1361719323000 }, "tripId" : "PZBRIAM6RYTU", "os" : "Android 3.0.15", "device" : "GT-I9300", "length" : -0.9963888888888889, "overdue" : -2.242777777777778, "status" : "COMPLETED", "vessel" : "Mornington Missile", "clientVersion" : "1.23" } , { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7c8" }, "start" : { "$date" : 1362594035000 }, "tripId" : "AHLNA5ITUXAW", "os" : "iPhone OS 6.0.1", "device" : "iPad 2", "length" : 0.4919444444444445, "overdue" : -0.6719444444444445, "status" : "COMPLETED", "vessel" : "vo10", "clientVersion" : "1.0.59" } , { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7c9" }, "start" : { "$date" : 1361532525000 }, "tripId" : "HKJMGKKJHFHT", "os" : "Android 3.0.31", "device" : "Nexus S", "length" : -0.9461111111111111, "overdue" : -2.161944444444444, "status" : "COMPLETED", "vessel" : "CG272", "clientVersion" : "1.23" } , { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7ca" }, "start" : { "$date" : 1361533803000 }, "tripId" : "O1CUWKOFNVVB", "os" : "iPhone OS 6.1", "device" : "iPhone 5 (GSM+CDMA)", "length" : 0.745, "overdue" : -0.9244444444444444, "status" : "COMPLETED", "vessel" : "Land Rover Discovery", "clientVersion" : "1.0.57" } , { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7cb" }, "start" : { "$date" : 1361570111000 }, "tripId" : "9EVYUPO8OGFX", "os" : "iPhone OS 6.1.2", "device" : "iPhone 5 (GSM+CDMA)", "length" : 10.00861111111111, "overdue" : 8.016111111111112, "status" : "COMPLETED", "vessel" : "fox echo", "clientVersion" : "1.0.59" } , { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7cc" }, "start" : { "$date" : 1361683861000 }, "tripId" : "4AC5Q0XDPXTB", "os" : "iPhone OS 6.1.2", "device" : "iPhone 5 (GSM+CDMA)", "length" : 1.006111111111111, "overdue" : 0.01416666666666667, "status" : "COMPLETED", "vessel" : "Jetski", "clientVersion" : "1.0.59" } , { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7cd" }, "start" : { "$date" : 1361695252000 }, "tripId" : "PDS8V2JSEDCL", "os" : "Android 3.0.31", "device" : "GT-I9305", "length" : 2.1225, "overdue" : -0.09722222222222222, "status" : "COMPLETED", "vessel" : "Energex Sandgate 1", "clientVersion" : "1.24" } , { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7ce" }, "start" : { "$date" : 1361700162000 }, "tripId" : "NWT85M7LCELM", "os" : "Android 3.0.31", "device" : "Nexus S", "length" : -0.005555555555555556, "overdue" : -1.245, "status" : "COMPLETED", "vessel" : "Mornington Missile", "clientVersion" : "1.24" } , { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7cf" }, "start" : { "$date" : 1361720315000 }, "tripId" : "OTDQP5LTPW4M", "os" : "Android 3.0.15", "device" : "GT-I9300", "length" : -0.7230555555555556, "overdue" : -2.970555555555555, "status" : "COMPLETED", "vessel" : "Mornington Missile", "clientVersion" : "1.23" } , { "_id" : { "$oid" : "51dc2e267ec3b7cdc465b7d0" }, "start" : { "$date" : 1361723166000 }, "tripId" : "YDBNGBTGPCLW", "os" : "Android 3.0.31", "device" : "GT-I9300", "length" : -0.9955555555555555, "overdue" : -2.242222222222222, "status" : "COMPLETED", "vessel" : "Mornington Missile", "clientVersion" : "1.23" }];

for (var i = 0; i < data.length; i++) {
    data[i].startDate = new Date(data[i].start.$date);
}

var tripsCx = crossfilter(data);
var allTripsGroup = tripsCx.groupAll();

var tripsByDateDimension = tripsCx.dimension(function (d) { return d.startDate; });
var tripsByDateGroup = tripsByDateDimension.group(d3.time.day);

 var tripVolume = dc.barChart("#trip-volume")
                   .width(600) // (optional) define chart width, :default = 200
                   .height(75) // (optional) define chart height, :default = 200
                   .transitionDuration(0) // (optional) define chart transition duration, :default = 500
                   .margins({ top: 10, right: 50, bottom: 30, left: 40 })
                   .dimension(tripsByDateDimension) // set dimension
                   .group(tripsByDateGroup) // set group
                   // (optional) whether chart should rescale y axis to fit data, :default = false
                   .elasticY(false)
                   // (optional) whether chart should rescale x axis to fit data, :default = false
                   .elasticX(false)
                   // define x scale
                   .x(d3.time.scale().domain([tripsByDateDimension.bottom(1)[0].startDate, tripsByDateDimension.top(1)[0].startDate ]))
                   // (optional) set filter brush rounding
                   .round(d3.time.day.round)
                   // define x axis units
                   .xUnits(d3.time.days)
                   // (optional) whether bar should be center to its x value, :default=false
                   .centerBar(true)
                   // (optional) render horizontal grid lines, :default=false
                   .renderHorizontalGridLines(true)
                   // (optional) render vertical grid lines, :default=false
                   .renderVerticalGridLines(true)
                   .brushOn(false);

            dc.renderAll();

$('#filter').on('click', function(){
    var minDate = tripsByDateDimension.top(5)[4].startDate;
    var maxDate = tripsByDateDimension.top(5)[0].startDate;
    console.log(tripVolume.filters());


    tripVolume.filter([minDate, maxDate]);
    tripVolume.x(d3.time.scale().domain([minDate,maxDate]));

    console.log(tripVolume.filters());

    dc.redrawAll()
});

Answer 1

У меня недостаточно очков, чтобы комментировать, но я могу рассказать вам о своем решении этой проблемы. AsticX(true) не меняет ось X временных рядов, в этом случае фильтрации в любом случае. То, что я в итоге сделал, чтобы получить желаемый эффект, это удалить диаграмму и воссоздать ее с набором данных, который я отфильтровал.