Я читаю ** Интерактивную визуализацию данных для Интернета Скотта Муарри **
У меня вопрос по одному из его примеров.
Вот структура данных:
![enter image description here](https://i.stack.imgur.com/ttT2x.png)
ВОПРОС 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();