如何在d3.js中创建动态条形图？

下面是完整的应用程序小提琴：http://jsfiddle.net/RG4Eg/3/如何在d3.js中创建动态条形图？

enter image description here

这里是JavaScript：

var HU = (function() { 

    var data = [ 
     {"time": "13:24:20", "level_1": "5553", "level_2": "4682", "level_3": "1005"}, 
     {"time": "14:24:20", "level_1": "6553", "level_2": "5682", "level_3": "2005"}, 
     {"time": "15:24:20", "level_1": "7553", "level_2": "6682", "level_3": "3005"}, 
     {"time": "16:24:20", "level_1": "8553", "level_2": "7682", "level_3": "3131"}, 
     {"time": "17:24:20", "level_1": "9953", "level_2": "5500", "level_3": "5005"}, 
     {"time": "18:24:20", "level_1": "8565", "level_2": "7682", "level_3": "6005"}, 
     {"time": "19:24:20", "level_1": "7753", "level_2": "4546", "level_3": "4405"} 
    ]; 

    init = function() { 

     var margin = { 
       top: 10, 
       right: 10, 
       bottom: 30, 
       left: 50 
      }, 
      width = 950 - margin.left - margin.right, 
      height = 500 - margin.top - margin.bottom; 

      var parseDate = d3.time.format("%H:%M:%S").parse; 

      var x = d3.time.scale() 
       .domain(d3.extent(data, function(d) { return parseDate(d.time); })) 
       .range([0, width]); 

      var y = d3.scale.linear() 
       .domain([0, d3.max(data, function(d) { return d.level_1; })]) 
       .range([height, 0]); 

      var xAxis = d3.svg.axis() 
       .scale(x) 
       .orient("bottom") 
       .tickFormat(d3.time.format(("%H:%M:%S"))); 

      var yAxis = d3.svg.axis() 
       .scale(y) 
       .orient("left"); 

      var svg = d3.select("#chart") 
       .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 + ")"); 

      svg.append("g") 
       .attr("class", "x axis") 
       .attr("transform", "translate(0, " + height + ")") 
       .call(xAxis); 

      svg.append("g") 
       .attr("class", "y axis") 
       .call(yAxis); 

      var bars = svg.selectAll("rect") 
       .data(data) 
       .enter(); 
      bars.append("rect") 
       .attr("x", function(d) { return x(parseDate(d.time)); }) 
       .attr("y", function(d) { return y(d.level_1); }) 
       .attr("width", 15) 
       .attr("height", function(d) { return height - y(d.level_1); }) 
       .style("fill", "steelblue"); 
      bars.append("rect") 
       .attr("x", function(d) { return x(parseDate(d.time)); }) 
       .attr("y", function(d) { return y(d.level_2); }) 
       .attr("width", 15) 
       .attr("height", function(d) { return height - y(d.level_2); }) 
       .style("fill", "green"); 
      bars.append("rect") 
       .attr("x", function(d) { return x(parseDate(d.time)); }) 
       .attr("y", function(d) { return y(d.level_3); }) 
       .attr("width", 15) 
       .attr("height", function(d) { return height - y(d.level_3); }) 
       .style("fill", "red"); 

      }; 

    return { 
     init: init 
    }; 

})(); 

HU.init();

由于每个第二滴答，我需要最左边应该添加一个新的数据点推列先前的数据指向右侧。

我还想要对数据本身的动态变化为每个第二，如：

之间+ 7％和-7电流的百分比LEVEL_1 VAL）
每个LEVEL_2随机10-30％关闭该值
每个level_3随机10-30折LEVEL_2值

我怎么能做到呢？

来源

2013-10-06 Kanan Farzali

你见过[本教程（http://mbostock.github.io/d3/tutorial/bar-2.html）？ –

@Lars Kotthoff：我做了一些修改：http://jsfiddle.net/RG4Eg/6/。由于某些原因，虽然并非所有redrawLevel_N函数都被触发。我怎么能让它触发60秒，就像在一分钟内调用这些函数60次？提前致谢。 –

您可以使用setInterval（function，period）来执行每个级别的绘制。你可以这样做：

drawLevel = function(level) { 
    var random; 

    svg.selectAll("rect") 
    .data(data) 
    .transition() 
    .duration(1000) 
    .attr("y", function(d) { 
     var min = d.level[level] - (d.level[level-1] * 0.03); 
     var max = d.level[level] - (d.level[level-1] * 0.01); 
     random = Math.floor(Math.random() * (max - min + 1) + min); 

     return height - y(random) - .5; 
    }) 
    .attr("height", function(d) { 
     return y(random); 
    }); 
} 

drawLevel(1); 
var l = 2; 
setInterval(function() { 
    drawLevel(l); 
    l = l + 1; 
}, 1000);

下面是一个setInterval（）的例子。

http://vida.io/documents/kZ2RzrYwZyvWTny2X

来源

2013-10-07 05:35:09

如何在d3.js中创建动态条形图？

回答

相关问题