问题描述
我想做什么
我正在尝试将包含 65,000 行的 CSV 加载到数据表中。尝试制作一个静态网页来展示我刚刚解析的一些数据,
我正在使用以下库
<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
解决方法
之前的加载时间超过了 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/