我怎样才能组JSON数据和在D3js

生成每个组的曲线图我已经使用以下代码我怎样才能组JSON数据和在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>

创建D3js图形和这之后是此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行一年。所以，我想创建一个星期的团体（一周7天的团体）。总之，我想为每一周创建图表，而我有全年的数据。我听说可以使用underscore.js。如果任何人都可以帮助我，那就太好了。在此先感谢

来源

2014-09-30 BomberMan

每组让你最终与像这样的解决方案组按周数的数据（使用moment.js到calcualate周数），然后映射：

[ 
    { 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), 
    }; 
});

来源

2014-09-30 11:28:29

我怎样才能组JSON数据和在D3js

回答

相关问题