d3.js - 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”属性: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

我没有足够的分数来评论，但我可以告诉你我对这个问题的解决方案。无论如何，在这种过滤情况下，elasticX(true) 不会更改时间序列 x 轴。为了获得我想要的效果，我最终做的是删除图表并使用我过滤的数据集重新创建它。