我正在按日期過濾一個dc.js時間序列圖表,然後單擊按鈕。我希望代表時間刻度的x軸在應用數據過濾器時發生變化。相反,xaxis保持不變,儘管圖表在日期的任何一側都會丟失。我的情況可以通過 這個問題是否被回答這不是很清楚,我在另一個問題( Adding a filter in dc.js/Crossfilter not updating the chart)創建的jsfiddle證明,但的jsfiddle建議證明我有這個問題:http://jsfiddle.net/PYeFP/5/dc.js在過濾後修改時間軸x軸
你可以看到,當您單擊過濾器按鈕,數據將被適當過濾,但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()
});
您是否試過elasticX(true)?如果我理解你的問題,那就是它打算做的。 https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#elasticxboolean – Gordon 2015-02-27 05:09:13
我有同樣的問題。我在圖表更新的x軸上也有一個時間標度,但不是軸。 y軸雖然正確更新。 – 2015-03-03 17:52:06