Question

我正在尝试生成每秒更新一次的动态（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>

请帮帮我..

提前致谢..

使用JavaScript动态（更新）X轴（D3js）

0 个答案: