Question

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

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

这里，value1的总和为12，value2为18.我需要以动态方式为每列提供总和。

Answer 1

我不知道您是如何加载数据的，但这是您可以采用的一种方式。

＆＃13;

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;
                });

＆＃13;

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

＆＃13;

非常简单，从data（存储在cols中）和data中的每一行获取列名，循环遍历这些列名称，将该列中的值一起添加并将它们存储在一个新变量中（在此示例中为totals）。

要显示它，我只是创建一个totals附加到data的表格，以便创建一个包含总计的新行。

获取d3.js中每列的总和

1 个答案: