我设法使用csv文件中的数据创建了一个简单的折线图,但我只想显示过去7天的数据,我该怎么做?
我相信我需要在某处做一个.filter,但我找不到任何好的例子,我相信它需要进入这个区块:
// Get the data
d3.csv("CSVdata.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
console.log("Date : " + d.date);
d.close = +d.close;
});
我上传了可在此处查看的图表:
http://plnkr.co/edit/JyQS0X?p=preview
我正在使用的HTML是:
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
</style>
<body>
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d/%m/%Y").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
// Adds the svg canvas
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Get the data
d3.csv("CSVdata.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
console.log("Date : " + d.date);
d.close = +d.close;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});
</script>
</body>
我正在使用的data.csv文件是
date,close
18/06/2015,49582.51
18/06/2015,50582.51
18/06/2015,52582.51
17/06/2015,52782.51
15/06/2015,55313.51
10/06/2015,58110.51
10/06/2015,55778.02
1/06/2015,53289.42
27/05/2015,53288.25
27/05/2015,50955.76
25/05/2015,48467.16
22/05/2015,49467.16
20/05/2015,49557.78
14/05/2015,50557.78
13/05/2015,53354.78
13/05/2015,50866.18
11/05/2015,48533.69
29/04/2015,49533.69
29/04/2015,47201.2
25/04/2015,44712.6
25/04/2015,45061.21
22/04/2015,45717.21
15/04/2015,45807.83
15/04/2015,43525.88
14/04/2015,41037.28
14/04/2015,42114.39
14/04/2015,42285.39
14/04/2015,43783.74
13/04/2015,46580.74
1/04/2015,48580.74
1/04/2015,46334.49
23/03/2015,43845.89
18/03/2015,43936.51
18/03/2015,41690.26
16/03/2015,39201.66
4/03/2015,41998.66
4/03/2015,39510.06
1/03/2015,37263.82
27/02/2015,37263.04
23/02/2015,37213.04
18/02/2015,34765.06
17/02/2015,32518.81
16/02/2015,30598.55
14/02/2015,33395.55
13/02/2015,36192.55
13/02/2015,36170.45
6/02/2015,36120.45
4/02/2015,36070.45
4/02/2015,33581.85
30/01/2015,31335.61
28/01/2015,31285.61
23/01/2015,21285.61
22/01/2015,21235.61
16/01/2015,21326.23
16/01/2015,21276.23
15/01/2015,21226.23
15/01/2015,18262.24
14/01/2015,10534.4
13/01/2015,10244.35
13/01/2015,12243.98
13/01/2015,92766.86
13/01/2015,82766.86
13/01/2015,42766.86
9/01/2015,22766.86
9/01/2015,22716.86
4/01/2015,22666.86
3/01/2015,22722.5
2/01/2015,22763.34
2/01/2015,22713.34
31/12/2014,22663.34
29/12/2014,22731.42
26/12/2014,22831.35
26/12/2014,22781.35
19/12/2014,22731.35
19/12/2014,22681.35
12/12/2014,22631.35
12/12/2014,22581.35
6/12/2014,22531.35
5/12/2014,22570.01
5/12/2014,22520.01
3/12/2014,22470.01
1/12/2014,51470.01
30/11/2014,51469.27
30/11/2014,51497.85
28/11/2014,51509.87
28/11/2014,51459.87
22/11/2014,51409.87
22/11/2014,51450.48
21/11/2014,51483.94
21/11/2014,1483.94
21/11/2014,1433.94
19/11/2014,1383.94
17/11/2014,1412.85
16/11/2014,1443.89
14/11/2014,1484.3
14/11/2014,1434.3
12/11/2014,1384.3
10/11/2014,1422.1
7/11/2014,1458.79
7/11/2014,1408.79
5/11/2014,1358.79
4/11/2014,1436.29
4/11/2014,1469.04
3/11/2014,1502.16
31/10/2014,1517.32
31/10/2014,1467.32
25/10/2014,1417.32
25/10/2014,1510.72
24/10/2014,1534.88
24/10/2014,1694.15
24/10/2014,1644.15
19/10/2014,1594.15
17/10/2014,1653.95
17/10/2014,1603.95
15/10/2014,1553.95
15/10/2014,1640.95
14/10/2014,1703.89
12/10/2014,1805.26
12/10/2014,1843.98
10/10/2014,1887.85
10/10/2014,1837.85
3/10/2014,1787.85
3/10/2014,1737.85
28/09/2014,1687.85
26/09/2014,1701.06
26/09/2014,1651.06
23/09/2014,1601.06
19/09/2014,1644.2
19/09/2014,1594.2
12/09/2014,1544.2
12/09/2014,1494.2
9/09/2014,1444.2
8/09/2014,1461.94
7/09/2014,1470.36
7/09/2014,1476.36
5/09/2014,1501.31
5/09/2014,1451.31
4/09/2014,1401.31
3/09/2014,1424.39
1/09/2014,1440.7
29/08/2014,1440.67
29/08/2014,1390.67
25/08/2014,1340.67
23/08/2014,1385.45
22/08/2014,1420.43
22/08/2014,1370.43
18/08/2014,1320.43
16/08/2014,1333.78
15/08/2014,1428.61
15/08/2014,1440.6
15/08/2014,1390.6
8/08/2014,1340.6
8/08/2014,1290.6
5/08/2014,1240.6
1/08/2014,1285.13
1/08/2014,1235.13
28/07/2014,1185.13
25/07/2014,1213.18
25/07/2014,1231.79
25/07/2014,1181.79
24/07/2014,1131.79
23/07/2014,1285.79
22/07/2014,1306.14
21/07/2014,1339.94
19/07/2014,1385.34
18/07/2014,1416.01
18/07/2014,1366.01
16/07/2014,1316.01
12/07/2014,1322.46
11/07/2014,1338.7
11/07/2014,1288.7
10/07/2014,1238.7
7/07/2014,1255.35
6/07/2014,1278.32
4/07/2014,1311.12
4/07/2014,1261.12
30/06/2014,1211.12
27/06/2014,1225.01
27/06/2014,1175.01
25/06/2014,1125.01
24/06/2014,1147.16
23/06/2014,1177.32
23/06/2014,1183.48
20/06/2014,1201.65
20/06/2014,1151.65
19/06/2014,1101.65
18/06/2014,1123.15
14/06/2014,1134.29
13/06/2014,1169.81
13/06/2014,1119.81
12/06/2014,1069.81
11/06/2014,1092.19
6/06/2014,1121.74
6/06/2014,1071.74
5/06/2014,1021.74
2/06/2014,1075.03
1/06/2014,1095.2
1/06/2014,1136.1
30/05/2014,1136.07
30/05/2014,1086.07
答案 0 :(得分:5)
您可以使用过滤功能(纯JavaScript)
data.forEach
阻止后
var cutoffDate = new Date();
cutoffDate.setDate(cutoffDate.getDate() - 90);
data = data.filter(function(d) {
return d.date > cutoffDate;
})
根据需要调整90到7或(max - 7)