按钮点击后，按编程方式按日期过滤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()
});
答案 0 :(得分：1)
我没有足够的评论意见，但我可以告诉你我对这个问题的解决方法。无论如何，在该过滤情况下，elasticX（true）不会改变时间序列x轴。我最终做的是获得我想要的效果是删除图表并使用我过滤的数据集重新创建它。