Question

我似乎无法弄清楚如何解析CSV并获得HTML的准确输出。我的CSV已经列出了几次相同的产品，此外还有一些组合产品需要打入各自的部件并添加到各自的产品中。

然后我需要找到一种方法来从表格显示中删除那些重复项和组合产品（即使只是在行中添加一个类并通过css隐藏也可以。）

使用最新代码的Codepen：https://codepen.io/BIGREDBOOTS/project/editor/DnaBqq

d3.csv("test.csv", function(data) {
    data.forEach(function(d) {
        d.net_quantity = + d.net_quantity;
     });
    function tabulate(data, columns) {
    var table = d3.select('body').append('table')
    var thead = table.append('thead')
    var tbody = table.append('tbody');

    // append the header row
    thead.append('tr')
      .selectAll('th')
      .data(columns).enter()
      .append('th')
        .text(function (column) { return column; });

    // create a row for each object in the data
    var rows = tbody.selectAll('tr')
      .data(data)
      .enter()
      .append('tr');

      var expensesCount = d3.nest()
      .key(function(d) { return d.SKU; })
      /*.rollup(function(v) { return v.length; })*/
      .rollup(function(v) { return {
        total: d3.sum(v, function(d) { return d.amount; })
      }; })
      .entries(data);
    console.log(JSON.stringify(expensesCount));

    // create a cell in each row for each column
    var cells = rows.selectAll('td')
      .data(function (row) {
        return columns.map(function (column) {
          return {column: column, value: row[column]};
        });
      })
      .enter()
      .append('td')
        .text(function (d) { return d.value; });

  return table;

}

// render the table(s)
tabulate(data, ['Product Title','SKU','Monthly units','Weekly units']); // 2 column table

现在，我得到了这个输出：

产品名称 - SKU - 每月单位 - 每周单位

产品一 - PRD101 - 5 - 2

产品二 - PRD102 - 10 - 3

产品三 - PRD103 - 15 - 10

产品OneAndTwo - PRD201 - 30 - 5

产品一 - PRD101 - 6 - 12

我想：

产品名称 - SKU - 每月单位 - 每周单位

产品一 - PRD101 - 41 - 19

产品二 - PRD102 - 40 - 8

产品三 - PRD103 - 15 - 10

Answer 1

为了给你一个正确的方向，使用nest（）对数据进行分组和求和：

    var expensesCount = d3.nest()
        .key(function(d) { return d.SKU; })
        .rollup(function(v) { return {
        "Product Title" : v[0]["Product Title"],
        "Monthly units": d3.sum(v, function(d) { return +d["Monthly units"];}),
        "Weekly units": d3.sum(v, function(d) { return +d["Weekly units"];})
        }; })
        .entries(data);

这会给你这个json：

[{"key":"PRD101","value":{"Product Title":"Product One","Monthly units":11,"Weekly units":14}},{"key":"PRD102","value":{"Product Title":"Product Two","Monthly units":10,"Weekly units":3}},{"key":" PRD103","value":{"Product Title":"Product Three","Monthly units":15,"Weekly units":10}},{"key":"PRD201","value":{"Product Title":"Product OneAndTwo","Monthly units":30,"Weekly units":5}}]

首先执行上述操作更容易，然后只需循环开始计数并为每个过滤掉不需要的对象的对象创建一行。

您应该首先清理数据，这样可以更直接。我用它作为测试输入..

 Product Title,SKU,Monthly units,Weekly units
 Product One,PRD101,5,2
 Product Two,PRD102,10,3
 Product Three, PRD103, 15, 10
 Product OneAndTwo,PRD201, 30, 5
 Product One,PRD101, 6, 12

在D3中添加CSV值

1 个答案: