how can i group JSON data into the weeks according

2019-05-13 19:16发布

站内文章 / JavaScript
25 0 0

问题:

I am doing some d3JS programming to generate graph with JSON data.

{
  "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"}
  ]
}

The problem I am facing is : on X-axis it takes all the rows from given jSON file. And my need is, sorting of days in week. In other words I have 'n' number of rows and I want to display only days of a single week, then other days will be shown on the click of 'next button'.

So help me to sort and display only 7 rows once, then it should follow the next 7 rows on NEXT button. Thanks in advance. I can provide d3js code if needed. I have a clue that it can be done with help of momentJS or undescoreJS

My index.html file follows like this 

<!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>

however X - axis is not my desired output

回答1:

You can use d3.nest() to group your data into week numbers

First, we need to define a time parser that would give you the week number of a date object

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

Then create a nest object

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

The nest object will be an array that contains your data grouped into week numbers

A live demo with your data can be found at http://jsfiddle.net/1bf2cqw3/ You can take a look at the nest object in the console



标签： javascript json d3.js underscore.js momentjs
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~