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

我想做什么

我正在尝试将包含 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/