D3js堆栈图X轴定制

我跟着这个例子d3js example。然后定制该曲线图在本 Image]![changes: Now stack is only 2 colours D3js堆栈图X轴定制

我的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"} 
]}

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

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 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(nest) 
     disp = [nest] 
     console.log(nest) 


     return {x: array[0], 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>

现在，在X轴THI代码表示给定JSON数据中的所有行。我的需要是我只想显示一次只有一周的数据。意思是我有JSON行数，我设法嵌套几天到一周。

请帮助我自定义带有给定代码的X轴。我试图在X轴上调用嵌套数组的值，但它没有给出正确的输出。在此先感谢

来源

2014-10-08 BomberMan

你想让X轴看起来像什么？ – Maggie 2014-10-10 01:07:04

它应该只显示**星期一星期二星期三星期四星期五星期六**（第1周）的数据。然后On NEXT点击它应显示（第2周）的数据。请参阅上面的图片 – BomberMan 2014-10-10 02:09:29

好的。我认为你将不得不（1）制作一个说“下一个”的按钮，然后（2）在该按钮上添加一个.on（“mouseclick”...）事件。该事件可能会调用某种包含enter - update - exit转换的redraw（）函数。我仍然在学习自己，并且有很多教程。这个帮了我很多：http://blog.visual.ly/creating-animations-and-transitions-with-d3-js/ – Maggie 2014-10-10 03:37:07

对于您需要做groupBy到您的JSON数据。

你可以试试这个简单的方法来实现：

var groupedByWeek = _.groupBy(data, function(item) { 
     var dateMoment = moment(item.day,"DD/MM/YYYY"); 
     return dateMoment.week();

将天转换为一个星期！

来源

2014-11-21 17:08:20

D3js堆栈图X轴定制

回答

相关问题