我正在尝试生成每秒更新一次的动态(X轴)图表(来自CSV文件的数据)。
我的CSV文件(Y轴)如下所示:
2E+03
2E+03
2E+03
2E+03
0
0
0
0
0
2E+03
2E+03
2E+03
...
...
X轴更新
|---------------------|-------|
1 9 10
|---------------------|-------|
1 10 11
|---------------|------|------|
1 2998 2999 3000
更新应与上图类似。我能够使用相同的数据生成一个静态的(X轴上有3000个值),但我很难找到一个让它变得动态的解决方案。我的代码是:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar {
fill: steelblue;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
stroke:black;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var rate="datarate";
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = (960 - margin.left - margin.right),
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);
function make_x_axis() {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
}
function make_y_axis() {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
}
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 + ")");
d3.text("t.csv", function(text) {
var data = d3.csv.parseRows(text).map(function(row) {
return row.map(function(value) {
return +value;
});
});
var time = [];
for (var i = 1; i != data.length; ++i){
time.push(i);
}
temp_data = [];
data.forEach(function(d,i) {
temp_obj = {};
temp_obj.time = time[i];
temp_obj.datarate = parseInt(d);
temp_data.push(temp_obj);
});
x.domain(temp_data.map(function(d) { return d.time; }));
y.domain([0, d3.max(temp_data, function(d) { return d[rate]; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")") // X axis starting point
.call(d3.svg.axis().scale(x).orient("bottom"));
svg .append("text")
.attr("transform", "translate(" + (width / 2) + " ," + (height + (margin.bottom)) + ")")
.style("text-anchor", "middle")
.text("Time (s)");
svg.append("g")
.attr("class", "y axis")
.call(d3.svg.axis().scale(y).orient("left"));
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -(margin.left-50))
.attr("x",-(height / 2))
.attr("dy", "-2em")
.style("text-anchor", "middle")
.text("Data Rate (Mbps)");
svg.selectAll(".bar")
.data(temp_data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.time); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d[rate]); })
.attr("height", function(d) { return height - y(d[rate]); });
function redraw() {
var bar = svg.selectAll("bar")
.data(temp_data, function(d) { return d.time; });
bar.enter().insert("svg:bar", "line")
.attr("x", function(d, i) { return time.push(i); })
.attr("y", function(d) { return height - y(d[rate]) ; })
.attr("width", width)
.attr("height", function(d) { return y(d[rate]); })
.transition()
.duration(1000)
.attr("x", function(d, i) { return d.time ; });
bar.transition()
.duration(1000)
.attr("x", function(d, i) { return d.time ; });
}
setInterval(function() {
temp_data.shift();
temp_data.push();
redraw();
}, 1500);
});
</script>
</body>
</html>
请帮帮我..
提前致谢..