如何使用D3 v6快速有效地将csv解析为数据表

Question

我想做什么

我试图加载一个CSV与65000行到一个数据表。试图做一个静态网页来展示一些数据，我刚刚解析，

我正在使用以下库

<script src="https://code.jquery.com/jquery-3.5.1.js" charset="utf-8"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js" charset="utf-8"> </script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.23/datatables.min.css" />

我做了什么

这是我在javascript方面的代码。我的HTML只有主体和头部。然后用表

填充头部

var tabulate = function (data, columns) {
var table = d3.select('body').append('table').attr("id", "example").attr("class", "display nowrap")
var thead = table.append('thead')
var tbody = table.append('tbody')
thead.append('tr')
.selectAll('th')
.data(columns)
.enter()
.append('th')
.text(function (d) {
return d
})
var rows = tbody.selectAll('tr')
.data(data)
.enter()
.append('tr')
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;
}
d3.csv("all_engineers.csv", function (data) {
var columns = d3.keys(data[0]);
tabulate(data, columns);
$('#example').DataTable();
})

问题是什么?

它太慢了。这可能是由于大数据集。我想知道有没有简单的解决办法。我知道D3是超级高效的，可能有我没有利用的东西。

我似乎也不能使用这个代码与d3 v6。我最终使用d3 v3，因为这是我发现的数据表工作的例子。

提前感谢您的宝贵时间。

更新多亏了高积云我们知道如何使用d3 v6

旧的实现(使用D3 V3)jsfiddle.net/2nwasz43

更新的实现(使用D3 V6)jsfiddle.net/gndv6rq0/1

Answer 1

之前的加载时间超过2分钟。我从CSV中删除了一些列，并决定在HTML页面中添加一个加载gif，因为就我想要做的事情而言，使此即时是不可能的

真正有助于减少加载时间的是将d3数据对象直接加载到数据表中，而不是将其放入DOM中。在后者中，我的页面没有响应，但在前者中，这种情况似乎已经消失了。

我使用d3版本3而不是版本6，因为语法似乎更干净，更熟悉我。如果你想使用d3版本6，那么你需要注意API的差异(参考https://jsfiddle.net/gndv6rq0/1)

我最后得到的是下面的脚本

function hideLoader() {
$('#loading').hide();
}
setTimeout(hideLoader, 80 * 1000);
var tabulate = function (columns) {
var table = d3.select('body').select('table')
var thead = table.append('thead')
thead.append('tr')
.selectAll('th')
.data(columns)
.enter()
.append('th')
.text(function (d) {
return d
})
return table;
}
d3.csv("All_engineers_reduced.csv", function (data) {
var columns = d3.keys(data[0]);
tabulate(columns);
$('#example').DataTable({
data: data,
columns: [
{
"data": "Engineer_ID"
},
{
"data": "Arabic_Names"
},
{
"data": "Latin_Names"
},
{
"data": "Field_ID"
},
{
"data": "SubField_ID"
},
{
"data": "Field"
},
{
"data": "SubField"
}
],
processing: true,
language: {
processing: "<img src='https://media1.giphy.com/media/feN0YJbVs0fwA/giphy.gif'>"
}
});
hideLoader();
})

加载的库仍然是

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js" charset="utf-8"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.23/datatables.min.css" />

你可以在下面的链接中看到最终结果https://ebrahimkaram.github.io/LebaneseEngineers/