D3中的动态堆积条形图

Question

I am trying to plot a dynamic stacked bar chart using D3.js. 我正在尝试使用D3.js绘制动态堆积条形图。 Basic requirement is that I will be getting a new data-point every few seconds and I should be able to replot(transition) the stacked chart. 基本要求是我每隔几秒就会得到一个新的数据点，我应该可以重新绘制（转换）堆积图表。 This is the code I have written : 这是我写的代码：

<html>
<head>
    <title>Page Title</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="d3/d3.js"></script>
    <script src="d3/d3.csv.js"></script>
    <script src="d3/d3.layout.js"></script>
</head>

<body>
    <style type="text/css">
        .chart rect {
        stroke: white;
        }
    </style>

<script>


    var t = 1297110663, // start time (seconds since epoch)
        v = 70, // start value (subscribers)
        sentidata = d3.range(33).map(next); // starting dataset

    var w = 20,
        h = 80;

    var x = d3.scale.linear()
        .domain([0, 1])
        .range([0, w]);

    var y = d3.scale.linear()
        .domain([0, 200])
        .rangeRound([0, h]);

    var z = d3.scale.ordinal()
        .range(["lightpink", "darkgray"]);

    //This function creates random test data of format : time, posvalue, negvalue
    function next() {
        return {
        time: ++t,
        posvalue: v = ~~Math.max(10, Math.min(90, v + 10 * (Math.random() - .5))),
        negvalue: v = ~~Math.max(10, Math.min(90, v + 10 * (Math.random() - .5)))
        };
    }

    //This function readjusts the data with one new data point and calls redraw function to replot the graph
    setInterval(function() {
        sentidata.shift();
        sentidata.push(next());    
        redraw(sentidata);
        }, 1500);

    var svg = d3.select("body").append("svg:svg")
        .attr("class", "chart")
        .attr("width", w * sentidata.length - 1)
        .attr("height", h);


    //Transpose the data into layers by Sentiment
    var sent = d3.layout.stack()(["posvalue","negvalue"].map(function(sentiment){
        return sentidata.map(function(d){
            return {x:d.time, y:+d[sentiment]};
            });
        }));


    //Add a group for each Sentiment
    var sentiment = svg.selectAll("g.sentiment")
                        .data(sent)
                        .enter()
                        .append("svg:g")
                        .attr("class","sentiment")
                        .style("fill", function(d,i){return z(i);})
                        .style("stroke", function(d,i){return d3.rgb(z(i)).darker();});

    //Add a rectangle for each time value
    var rect = sentiment.selectAll("rect")
                        .data(Object)
                        .enter()
                        .append("svg:rect")
                        .attr("x",function(d, i) { return x(i) - .5; })
                        .attr("y",function(d){return h - y(d.y0)-y(d.y);})
                        .attr("height", function(d){return y(d.y);})
                        .attr("width",w);


    svg.append("line")
        .attr("x1", 0)
        .attr("x2", w * sentidata.length)
        .attr("y1", h - .5)
        .attr("y2", h - .5)
        .style("stroke", "#000");


    function redraw(data) {

        //Transpose the data into layers by Sentiment
        var sent = d3.layout.stack()(["posvalue","negvalue"].map(function(sentiment){
           return data.map(function(d){
               return {x:d.time, y:+d[sentiment]};
               });
           }));

        //Add a group for each Sentiment
        var sentiment = svg.selectAll("g.sentiment")
                        .data(sent)
                        .transition()
                        .duration(1000)
                        .attr("class","sentiment")
                        .style("fill", function(d,i){return z(i);})
                        .style("stroke", function(d,i){return d3.rgb(z(i)).darker();});

        var rect = sentiment.selectAll("rect")
                .data(Object)
                .transition()
                .duration(1000)
                .attr("y",function(d){return h - y(d.y0)-y(d.y);})
                .attr("height", function(d){return y(d.y);});

    }

</script>
</body>
</html>

Initial stacked chart gets plotted fine. 初始堆积图表被绘制得很好。 But when I call redraw method it gives me "[object Object] has no method 'data'" error. 但是当我调用redraw方法时，它给了我“[object Object]没有方法'数据'”错误。 This error is coming when I am trying to initialize rect variable 当我尝试初始化rect变量时，会出现此错误

var rect = sentiment.selectAll("rect")
                    .data(Object)

Not sure what I am doing wrong. 不确定我做错了什么。 I am looking for something similar 我正在寻找类似的东西

Any suggestions will be really appreciated !! 任何建议将非常感谢!!

Answer 1

Here's a working example of a " D3 Dynamic Stacked Bar Chart ". 这是“ D3动态堆积条形图 ”的工作示例。 I hope it helps. 我希望它有所帮助。

My Best, 我最好的，

Frank 坦率

D3中的动态堆积条形图

问题描述

1 个解决方案

解决方案1
5 2012-05-02 12:05:17

D3中的动态堆积条形图

问题描述

1 个解决方案

解决方案1 5 2012-05-02 12:05:17

解决方案1
5 2012-05-02 12:05:17