在D3中添加CSV值

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 - 每月單位 - 每週單位

產品One - PRD101 - 41 - 19

產品雙 - PRD102 - 40 - 8

產品三 - PRD103 - 15 - 10

Answer 1

爲了讓你在正確的方向上的微移，以組和使用巢（）求和數據：

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