將時間範圍從幾天更改爲幾周，如何更新和彙總數據值？

我試圖讓我的條形圖在d3.js中更新它的值，當用戶將時間範圍從幾天改爲幾周或幾個月時。（即當時間刻度變爲幾周時，我想要將給定周內每天的所有數據值相加在一起）。例如，這裏是與x軸的時間刻度的默認圖形以天：將時間範圍從幾天更改爲幾周，如何更新和彙總數據值？

X軸以天 enter image description here

當用戶更改的時間尺度來周和x軸的更新，數據值保持由天，分組如下所示：

X軸刻度在周，但數據值保持由天分組： x-Axis scale in weeks, but data values remain grouped by day

我想要的是，在x軸上每年的每週數只有一個欄，顯示用戶爲該周的所有7天提供的所有數據值的總和。我如何實現這一目標？

這是必須在服務器端完成，還是可以在客戶端使用javascript，還是有一些簡單的d3.js方式，我忽略了？

這是我的數據是這樣的：

[{"date":"2013-04-20","load_volume":400},{"date":"2013-04-23","load_volume":400},{"date":"2013-04-24","load_volume":400},{"date":"2013-04-28","load_volume":1732},{"date":"2013-04-30","load_volume":400}]

我想實現這一點，我可以轉換的日期值weekNumberOfYear格式（例如，17這個星期），他們推到一個數組並刪除所有重複項，然後對該數組中每個日期的數據值進行求和。我這樣做與數據是這樣的：

[{"date":"15","load_volume":400},{"date":"16","load_volume":2532},{"date":"17","load_volume":400}]

不過，我不相信這是正確的做法，因爲我總是得到一個「錯誤：屬性的X =無效值」南「」中的JS安慰。這個我想是因爲我用的x縮放比例來定位我的圖表中的rects：

.attr("x", function(d) { return padding + x(new Date(d.date)); })

...這將導致X（星期三1969年12月31日19:00:00 GMT-0500（EST）），這會引發NaN錯誤。

我現在試圖將日期格式化爲％Y-％m-％d格式，讓它成爲每週星期一的開始，但我想知道是否有更簡單的解決方案，因爲我一直在這一整天。

來源

2013-05-06 kwyoung11

嗯，我想我已經想通了。我只需要將日期轉換爲毫秒時間，並刪除JSON字符串中日期值周圍的雙引號（雙引號給了我一個NaN錯誤）。我這樣做有以下功能：

function getWeekDate(d) { 
    d = new Date(d); // get current date 
    var day = d.getDay(); 
    var diff = d.getDate() - day + (day == 0 ? -6 : 1); // Subtract day number of month from day number of week, and adjust when day is sunday 
    var date = new Date(d.setDate(diff)); 
    return date.setHours(0); 
}

這是從this SO question調整。

不知道D3是否有更好的方法。如果我發現我會在這裏發佈。

來源

2013-05-06 21:57:02 kwyoung11

將時間範圍從幾天更改爲幾周，如何更新和彙總數據值？

回答

相關問題