Получить общую сумму для каждого столбца в d3.js

Question

Я с нетерпением жду, чтобы получить общую сумму каждого столбца, используя d3.js динамическим способом. Пожалуйста, найдите ПРИМЕР-

 
key | value1 | value2 | value3 | value4 
-----+--------+--------+--------+-------- 
mike | 1  | 3  | 5  | 7  
-----+--------+--------+--------+-------- 
mila | 2  | 4  | 6  | 8 
-----+--------+--------+--------+-------- 
minda| 9  | 11  | 13  | 15 

Здесь сумма для значению1 составляет 12, значение2 18. Мне нужна сумма для каждого столбца в динамике.

Answer 1

Я не знаю, как вы загружаете свои данные, но вот один из способов сделать это.

var data = [ 
 
    { key: "mike", value1: 1, value2: 3, value3: 5, value4: 7}, 
 
    { key: "mila", value1: 2, value2: 4, value3: 6, value4: 8}, 
 
    { key: "minda", value1: 3, value2: 5, value3: 7, value4: 9}, 
 
    { key: "mandy", value1: 4, value2: 6, value3: 9, value4: 10} 
 
]; 
 

 
var cols = d3.keys(data[0]), 
 
    table = d3.select("#vis").append("table"), 
 
    totals = {}; 
 

 
data.forEach(function(d) { 
 
    cols.forEach(function(k) { 
 
     if (k !== "key") { 
 
      if (k in totals) { 
 
       totals[k] += d[k]; 
 
      } else { 
 
       totals[k] = d[k]; 
 
      } 
 
     } 
 
    }); 
 
}); 
 

 
totals['key'] = 'totals'; 
 

 
data.push(totals); 
 

 
table.append("thead").append("tr").selectAll("th") 
 
    .data(cols) 
 
    .enter().append("th") 
 
    .html(function(d) { 
 
     return d; 
 
     }); 
 

 
var rows = table.append("tbody").selectAll("tr") 
 
       .data(data) 
 
       .enter().append("tr") 
 
       .html(function(d) { 
 
        html = ""; 
 
        cols.forEach(function(k) { 
 
         html += "<td>" + d[k] + "</td>"; 
 
        }); 
 

 
        return html; 
 
       });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div id="vis"></div>

Это очень просто на самом деле, получить имена столбцов из вашего data (хранится в cols) и для каждой строки в вашем data, петля над этими именами столбцов, добавив значения в этом столбце вместе и сохраняя их в новой переменной (totals в этом примере).

Чтобы отобразить его, я просто создаю таблицу с totals, добавленную к data, поэтому она создает новую строку с итоговыми значениями в ней.