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

Question

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

Вы можете видеть, что, когда вы щелкаете по кнопке фильтра, данные соответствующим образом фильтруются, но xAxis содержит тот же диапазон значений.
Я попытался воссоздать масштаб x и присвоить ему «x'property» диаграммы: 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

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