我如何將JSON數據分組並在D3js中生成每個組的圖形

Question

我使用以下代碼創建了D3js圖

<!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 src="http://underscorejs.org/underscore.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 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 formatPercent = d3.format("0");

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]) + ")");

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) {
      return {x: parse(d.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; }));
  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>

然后是這個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"}
]}

因此，上面的代碼將輸出顯示為10個給定行的圖形。 我一年有365行。 因此，我想為一個星期創建一組天（一組為1天的7天）。 簡而言之，我想每隔一周創建一次圖表，而我有整年的數據。 我聽說可以通過使用underscore.js來實現。 如果有人可以幫助我，那就太好了。 提前致謝

Answer 1

該解決方案按周數對數據進行分組（使用moment.js計算周數），然后映射每個組，從而以類似以下內容結尾：

[
   { week: 1, totalAllocated: 43.6, totalUnallocated: 23.56 },
   { week: 2, totalAllocated: 11.3, totalUnallocated: 16.68 }
   ...
]

var weekNumber = function(thingy){
    return moment(thingy.date).week();
}

var sumAllocated = function(total, thingy){
    return total + parseFloat(thingy.allocated);
}

var sumUnallocated = function(total, thingy){
    return total + parseFloat(thingy.unallocated);
}

var groups = _.groupBy(test, weekNumber);

var weeklyBreakdown = _.map(groups, function(group, week){
    return {
        week: week,
        totalAllocated : _.reduce(group, sumAllocated, 0),
        totalUnallocated : _.reduce(group, sumUnallocated, 0),
    };
});

我如何將JSON數據分組並在D3js中生成每個組的圖形

問題描述

1 個解決方案

解決方案1
0 已采納 2014-09-30 11:28:29

我如何將JSON數據分組並在D3js中生成每個組的圖形

問題描述

1 個解決方案

解決方案1 0 已采納 2014-09-30 11:28:29

解決方案1
0 已采納 2014-09-30 11:28:29