获取d3.js中每列的总和

Get sum total for each column in d3.js

本文关键字：d3 js 获取      更新时间：2023-09-26

我期待着以动态方式使用d3.js获得每列的总和。请查找示例-

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

这里，value1的总和为12，value2为18。我需要以一种动态的方式计算每一列的总和。

我不知道你是如何加载数据的，但这里有一种方法可以做到。

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的表，这样它就创建了一个包含总计的新行

相关文章：