javascript - 读取一个巨大的 csv 文件并使用 d3 在 Javascript 中填充 map

标签 javascript d3.js

我正在使用 d3 加载一个巨大的 CSV 文件,稍后我将使用该文件进行一些处理。我想加载文件并根据某些条件填充Map

我的csv文件是这样的

h1    h2    h3    h4
1     A     3     4
2     A     1     6
1     B     5     7
2     C     8     19

等等。可能有大约 4M+ 条目。

我想从此 csv 数据填充 map 。 map 应该是这样的

1 A : [3, 4]
2 A : [1, 6]
1 B : [5, 7]
2 C : [8, 19]

key 必须是 h1h2 的组合。其他列将作为值添加。

我能够使用以下代码实现此目的

function makeKey(a, b) {

    return "" + a + " " + b;
}

function csvToColumnArrays(csv) {

    let csvMap = new Map();

    for (let i = 0; i < csv.length; i++) {


        let data = csv[i];

        let value = [];
        value.push(parseFloat(data["h3"]));
        value.push(parseFloat(data["h4"]));

        let key = makeKey(data["h1"], data["h2"]);

        csvMap.set(key, value);

    }

    return csvMap;

}




d3.csv(file_url, function(csv) {

    let csvMap = csvToMap(csv);

}

这是 2M 条目大小的完美文件。但当尺寸进一步增加时,页面就会断裂。

有没有更有效的方法来做到这一点?

最佳答案

制作一个包含 4M 条目的字典不会使我的计算机崩溃。

var count = 4 * 1000 * 1000;

var map = {}

for (var i=0; i < count; ++i) {
  map["" + i + "ABCDEF"[i%6] ] = [ Math.random(), Math.random() ];
}
//console.log(map);
console.log("done!");

使用new Map()

var count = 4 * 1000 * 1000;

var map = new Map();

for (var i=0; i < count; ++i) {
  map.set("" + i + "ABCDEF"[i%6], [ Math.random(), Math.random() ]);
}
//console.log(map);
console.log("done!");

关于javascript - 读取一个巨大的 csv 文件并使用 d3 在 Javascript 中填充 map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53045534/

相关文章:

javascript - 火狐插件 : not able to listen firefox "quit-application" event

javascript - HTML 中的水平布局

javascript - 如何更新使用 ReactDOM.render() 渲染的 React Component 的 props

javascript - 将文本放在圆圈内。 d3.js

javascript - 如何访问 Angular 4 服务中的 DOM 元素?

javascript - JSDoc 中何时对返回值求反?

d3.js - d3 和 Leaflet 之间的 GeoJSON 映射差异

javascript - 如何使用 d3 从 JSON 数组元素渲染表格

javascript - 如何使用jquery在图表中显示轴?

javascript - D3.js 条形图动画未正确退出