【发布时间】：2014-10-06 16:48:27
【问题描述】：
我正在做一些 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"}
]
}
我面临的问题是：在X-axis 上，它从给定的 jSON 文件中获取所有行。我的需要是，对一周中的日子进行排序。换句话说，我有“n”行，我只想显示一周中的几天，然后单击“下一步”按钮将显示其他日期。
所以帮我排序和显示一次只有 7 行，然后它应该在 NEXT 按钮上跟随接下来的 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 轴不是我想要的输出
【问题讨论】：
-
我可能会创建一种算法方法，在其中记录数组或列表中的开始和顶部位置。然后，单击下一步，我会更新职位。使用 d3.filter 确定要显示的星期。
-
d3.filter 在他们的文档中不存在！ (github.com/mbostock/d3/wiki/API-Reference)
-
知道了，伙计！谢谢
标签： javascript json d3.js underscore.js momentjs