D3 зацикливаем каждую строку и получаем общую сумму - PullRequest
0 голосов
/ 09 мая 2020

Я читаю ** Интерактивную визуализацию данных для Интернета Скотта Муарри **

У меня вопрос по одному из его примеров.

Вот структура данных:

enter image description here

ВОПРОС 1)

Для for-l oop, который преобразует строку в целое число или 0, если он отсутствует: Is правильно сказать: d: представляет всю строку i: это индекс (позиция) этого объекта cols: это столбец заголовка нашего набора данных

В том же l oop: что делает эта часть код do: var col= cols[i];

Вопрос 2)

Для l oop, которое суммирует итоги строк, может кто-нибудь показать / объяснить мне, что происходит. Что такое д? Как это работает? for (var i = 0; i < keys.length; i++) { sum += d[keys[i]];//sum = sum + d[keys[i]]; };

Вот его код:


    //Width, height and padding variables
    var w= 800;
    var h= 500;
    var padding= 20;

    var dataset, xScale, yScale, xAxis, yAxis, area; // empty for now

    /*
                //Width and height
                var w = 800;
                var h = 500;
                var padding = 20;

                var dataset, xScale, yScale, xAxis, yAxis, area;  //Empty, for now
    */
    //converting strings to Dates
    var parseTime=d3.timeParse("%Y-%m");
    //converting dates to strings
    var formatTime=d3.timeFormat("%b %Y")

    /*
                //For converting strings to Dates
                var parseTime = d3.timeParse("%Y-%m");

                //For converting Dates to strings
                var formatTime = d3.timeFormat("%b %Y");
    */          

                //Function for converting CSV values from strings to Dates and numbers
                //We assume one column named 'Date' plus several others that will be converted to ints 

                var rowConverter= function(d, i, cols){ 
                    //d= represents the entire row
                    //i = is the index (position) of that object 
                    //cols= is the header column of our dataset

                    //Initial "row" object includes only date
                    var row={
                        date: parseTime(d.Date), // make a new Date object for each year + month
                    };

                    //for each loop, it gets a property of:
                    // +d[cols[i]] ==> string to int or zero is does not exist
                    // i=1 skip date column
                    for (var i=1; i< cols.length; i++){
                        var col= cols[i];

                        //if this value exists: (d[cols[i]])
                        if(d[cols[i]]){ 
                            row[cols[i]]= +d[cols[i]]; // change to int
                        } else {// otherwise make blanks 0
                            row[cols[i]]=0;

                        }

                    }
                    return row;

                }           

    /*          var rowConverter = function(d, i, cols) {

                    //Initial 'row' object includes only date
                    var row = {
                        date: parseTime(d.Date),  //Make a new Date object for each year + month
                    };

                    //Loop once for each vehicle type
                    for (var i = 1; i < cols.length; i++) {
                        var col = cols[i];

                        //If the value exists…
                        if (d[cols[i]]) {
                            row[cols[i]] = +d[cols[i]];  //Convert from string to int
                        } else {  //Otherwise…
                            row[cols[i]] = 0;  //Set to zero
                        }
                    }

                    return row;
                }
    */
    var stack= d3.stack()
                 .order(d3.stackOrderDescending);   // the sum of the greatest series goes at the bottom    

    /*          
                //Set up stack method
                var stack = d3.stack()
                              .order(d3.stackOrderDescending);  // <-- Flipped stacking order
    */
                //Load in data
                d3.csv("ev_sales_data.csv", rowConverter)
                  .then(data=> {
                      var dataset=data;
                      console.log("Dataset", data); 


                    //Now that we know the column names in the data…
                    var keys = dataset.columns;
                    console.log("Names of the columns in dataset", dataset.columns);    
                    keys.shift();  //Remove first column name ('Date')
                    stack.keys(keys);  //Stack using what's left (the car names)

                    //Data, stacked
                    var series = stack(dataset);
                     console.log("Series",series);

                    //Create scale functions
                    xScale = d3.scaleTime()
                                   .domain([
                                        d3.min(dataset, function(d) { return d.date; }),
                                        d3.max(dataset, function(d) { return d.date; })
                                    ])
                                   .range([padding, w - padding * 2]);

                    yScale = d3.scaleLinear()
                                    .domain([
                                        0,
                                        d3.max(dataset, function(d) {
                                            var sum = 0;

                                            //Loops once for each row, to calculate
                                            //the total (sum) of sales of all vehicles
                                            for (var i = 0; i < keys.length; i++) {
                                                sum += d[keys[i]];//sum = sum + d[keys[i]];
                                            };
                                            //console.log("length of keys",keys.length);
                                            console.log("Sum",sum);
                                            return sum;
                                        })
                                    ])
                                    .range([h - padding, padding / 2])
                                    .nice();

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...