如何根據日曆將JSON數據分組爲幾周？

我正在做一些d3JS編程來生成帶有JSON數據的圖形。如何根據日曆將JSON數據分組爲幾周？

{ 
    "test": [ 
    {"date":"1/5/2014","allocated":"14.14","unallocated":"7.14"}, 
    {"date":"1/6/2014","allocated":"10.38","unallocated":"1.14"}, 
    {"date":"1/7/2014","allocated":"1.43","unallocated":"3.14"}, 
    {"date":"1/8/2014","allocated":"12","unallocated":"6.14"}, 
    {"date":"1/9/2014","allocated":"13.34","unallocated":"4.44"}, 
    {"date":"1/10/2014","allocated":"6.34","unallocated":"1.14"}, 
    {"date":"1/11/2014","allocated":"8.34","unallocated":"2.14"}, 
    {"date":"1/12/2014","allocated":"6.88","unallocated":"4.14"}, 
    {"date":"1/13/2014","allocated":"23.34","unallocated":"2.14"}, 
    {"date":"1/14/2014","allocated":"3.34","unallocated":"0.14"} 
    ] 
}

我面臨的問題是：在它從給定的jSON文件中獲取所有行。而我的需要是，按周排列幾天。換句話說，我有'n'行數，我只想顯示一週中的某幾天，然後在'下一個按鈕'點擊時顯示其他日子。

所以幫我排序並只顯示7行一次，那麼它應該跟隨下一個7行上的下一步按鈕。在此先感謝。如果需要，我可以提供d3js代碼。我有一個線索，它可以與momentJS的幫助或進行undescoreJS

我的index.html文件如下這樣

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Bar Graph</title> 
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script> 
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script> 
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.js?1.29.1"></script> 
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.csv.js?1.29.1"></script> 
    <script type="text/javascript" src="/node_modules/underscore/underscore-min.js"></script> 
    <script type="text/javascript" src="/node_modules/moment/moment.js"></script> 
    <script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script> 
    <script type="text/javascript" src="http://momentjs.com/downloads/moment.js"></script> 
    <style type="text/css"> 

     svg { 
     width: 550px; 
     height: 500px; 
     border: solid 1px #ccc; 
     font: 10px sans-serif; 
     shape-rendering: crispEdges; 
     } 

    </style> 
    </head> 
    <body> 
    <script type="text/javascript"> 

     // var week = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; 

     var w = 550, 
      h = 500, 
      p = [20, 30, 30, 20], 
      x = d3.scale.ordinal().rangeRoundBands([0, w - p[1] - p[3]]), 
      y = d3.scale.linear().range([0, h - p[0] - p[2]]), 
      z = d3.scale.ordinal().range(["lightpink", "lightblue"]), 

      parse = d3.time.format("%m/%d/%Y").parse, 
      format = d3.time.format("%a"); 

     var svg = d3.select("body").append("svg:svg") 
     .attr("width", w) 
     .attr("height", h) 
     .append("svg:g") 
     .attr("transform", "translate(" + p[3] + "," + (h - p[2]) + ")"); 
     var t 

     d3.json("test.json", function(test) { 
     // Transpose the data into layers by cause. 
     var causes = d3.layout.stack()(["allocated", "unallocated"].map(function(cause) { 

      return test.test.map(function(d) { 
      // var temp = _.each(test, function(record){ 
      date = parse(d.date); 
      array = [date] 
      // console.log(array) 

      var week = d3.time.format("%U"); 

      var nest = d3.nest() 
      .key(function(d) { 
       return week(new Date(array)); 
      }) 

      .entries(array); 
      console.log(week) 

      return {x: date, y: +d[cause]}; 
      }); 
     })); 

     // Compute the x-domain (by date) and y-domain (by top). 
     x.domain(causes[0].map(function(d) { return d.x; })); 
     console.log(x) 
     y.domain([0, d3.max(causes[causes.length - 1], function(d) { return d.y0 + d.y; })]); 

     // Add a group for each cause. 
     var cause = svg.selectAll("g.cause") 
     .data(causes) 
     .enter().append("svg:g") 
     .attr("class", "cause") 
     .style("fill", function(d, i) { return z(i); }) 
     .style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); }); 

     // Add a rect for each date. 
     var rect = cause.selectAll("rect") 
     .data(Object) 
     .enter().append("svg:rect") 
     .attr("x", function(d) { return x(d.x); }) 
     .attr("y", function(d) { return -y(d.y0) - y(d.y); }) 
     .attr("height", function(d) { return y(d.y); }) 
     .attr("width", x.rangeBand()); 

     // Add a label per date. 
     var label = svg.selectAll("text") 
     .data(x.domain()) 
     .enter().append("svg:text") 
     .attr("x", function(d) { return x(d) + x.rangeBand()/2; }) 
     .attr("y", 6) 
     .attr("text-anchor", "middle") 
     .attr("dy", ".71em") 
     .text(format); 

     // Add y-axis rules. 
     var rule = svg.selectAll("g.rule") 
     .data(y.ticks(5)) 
     .enter().append("svg:g") 
     .attr("class", "rule") 
     .attr("transform", function(d) { return "translate(0," + -y(d) + ")"; }); 

     rule.append("svg:line") 
     .attr("x2", w - p[1] - p[3]) 
     .style("stroke", function(d) { return d ? "#fff" : "#000"; }) 
     .style("stroke-opacity", function(d) { return d ? .7 : null; }); 

     rule.append("svg:text") 
     .attr("x", w - p[1] - p[3] + 6) 
     .attr("dy", ".35em") 
     .text(d3.format(",d")); 
     }); 
    </script> 
    <tr> 
     <!-- <td>Previous</td> --> 
     <td>Next</td> 
    </tr> 
    </body> 
</html>

然而X - 軸是不是我想要的輸出

來源

2014-10-06 BomberMan

我可能會創建一個算法的方法，我在一個a中記錄開始位置和頂部位置雷或列表。然後，點擊下一步，我更新職位。使用d3.filter來確定顯示哪一週。 – 2014-10-06 17:36:16

d3.filter文件中不存在！（https://github.com/mbostock/d3/wiki/API-Reference） – BomberMan 2014-10-07 06:15:37

請參閱：http://bl.ocks.org/kobben/8576867 – 2014-10-07 11:43:06

您可以使用d3.nest()將您的數據分組爲星期編號

首先，我們需要定義一個時間分析器，它會給你一個日期對象的星期編號

var week = d3.time.format("%U");

然後創建一個窩對象

var nest = d3.nest() 
    .key(function (d) { 
     return week(new Date(d.date)); 
    }) 
    .entries(data.test);

巢對象將包含您的數據分組到週數數組

與您的數據進行現場演示可以在http://jsfiddle.net/1bf2cqw3/ 被發現你可以看看控制檯中的嵌套對象

來源

2014-10-06 17:59:05

感謝您的指導。我現在已經添加了index.html文件。我得到了你的邏輯，但仍然沒有得到所需的X軸輸出。你可以做精確的建議或幫助上述代碼？提前致謝 – BomberMan 2014-10-07 06:04:15

如何根據日曆將JSON數據分組爲幾周？

回答

相關問題