d3之动态生成条形图

d3动态生成条形图,效果如下:


WeChatSight3.gif
var dataset=[];
        var nextdata = function(x){
            return 20 + x*x;
        };
        var pushdata = function(){
            dataset.push(nextdata);
            return dataset;
        };
        var _svg = d3.select("body")
                .append("svg")
                .attr("width","400")
                .attr("height","800");

        function drawRect(){
            _svg.selectAll("rect")
                    .data(pushdata)
                    .enter()
                    .append("rect")
                    .attr("x","20")
                    .attr("y",function(d,i){
                        return 20+20*i+30*i;
                    })
                    .attr("width",function(d,i){
                        return d(i);
                    })
                    .attr("height","20")
                    .style("fill","blue");
        }
        setInterval(function(){
            drawRect();
        },2*100)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容