stacked dynamic line graph d3.js

Question

Any idea of how I can make this dynamic line graph stacked? http://jsfiddle.net/praveen_jegan/QBDGB/6/

var options = {
    series: {
        stack: true,
        lines: {
            show: true,
            fill: true
        }
    },

Does any one have any example?

Answer 1

您可以在d3js.org http://bl.ocks.org/mbostock/4060954上查看流图示例

Answer 2

All you need to do is to create a new data set that is a stacked version of your old data.

The following lines will do this for your example:

var data1s = data1;

var data2s = []; for(var i = 0; i < data1s.length; i++){data2s.push({time: data1[i].time, value:  data1s[i].value + data2[i].value}  )};

var data3s = []; for(var i = 0; i < data2s.length; i++){data3s.push({time: data2[i].time, value:  data2s[i].value + data3[i].value}  )};

var data4s = []; for(var i = 0; i < data3s.length; i++){data4s.push({time: data3[i].time, value:  data3s[i].value + data4[i].value}  )};

This is about the ugliest way you can create this data, but it works. I've created a fiddle of it here.

Note that, in making my fiddle work, I need to create this data initially, refer to this new stacked data in place of the original data, and also update the stacked data.