Javascript D3中的动态堆叠条形图_Javascript_D3.js

Javascript D3中的动态堆叠条形图

javascript d3.js

Javascript D3中的动态堆叠条形图,javascript,d3.js,Javascript,D3.js,我正在尝试使用D3.js绘制动态堆叠条形图。基本要求是，我将得到一个新的数据点每隔几秒钟，我应该能够回复（过渡）堆叠图表。这是我写的代码： <html> <head> <title>Page Title</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> &

我正在尝试使用D3.js绘制动态堆叠条形图。基本要求是，我将得到一个新的数据点每隔几秒钟，我应该能够回复（过渡）堆叠图表。这是我写的代码：

<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>

不知道我做错了什么。我在找东西

任何建议都将不胜感激

下面是一个“”的工作示例。我希望有帮助

我最好的

Frank

.data（）

获取用于绘图的值或对象数组。不要传递“Object”，而是传递你想显示的数据。明白了。我在重画中定义了

var情绪

作为一个转换，因为我在调用selectAll后立即使用方法链接创建转换。因此，正如错误消息所暗示的，它没有数据方法。因此，我创建了一个单独的声明，以避免冲突。感谢Mike Bostoc在D3 Google Group上的快速响应。

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