从 D3 中的嵌套数组中删除属性答案

【问题标题】：Removing attributes from nested array in D3从 D3 中的嵌套数组中删除属性
【发布时间】：2016-12-04 11:30:28
【问题描述】：

我正在尝试从 D3 中的数组中过滤掉一些属性。该数组包含 csv 文件的值。

对于这样的小型 csv 文件，这一切都很好：

d3.csv("foods.csv", function(data) {
data.forEach(function(v){ delete v.name });
data.forEach(function(v){ delete v.created_at });
});

这是第一个数组的样子：

但是当我尝试为更大的 csv 文件执行此操作时，我收到一条错误消息：“devtools 已与页面断开连接。一旦重新加载页面，devtools 将自动重新连接”。这就是第二个数组的样子。

为什么这不适用于第二个数组？数组是否太大，或者我应该尝试递归处理这些值，因为我已经尝试过这样做：

function deleteCitation(v) {
if(Object.prototype.toString.call(v) === '[object Array]' ) {
    v.forEach(deleteCitation);
}
else {
    delete v.citation;
 }
}

d3.csv("compounds_foods.csv", function(data) {
   data.forEach(deleteCitation);

   print(data);
});

【问题讨论】：

哇，在客户端加载一个包含 740k+ 个项目的数组看起来有点太多了，您确定需要所有这些数据点吗？不能先在服务器端进行某种预聚合吗？

标签： javascript arrays csv d3.js

【解决方案1】：

我从未加载 74 万行 的 CSV。不过，我相信你有一些选择：

使用行转换函数，或访问函数：

d3.csv("foods.csv", deleteCitation, function(data) {
//the rest of the code

然后声明转换函数：

function deleteCitation(d){
    delete d.name;
    delete d.created_at;
    return d;
}

我没有对其进行基准测试，也许转换函数与您的 forEach 花费的时间相同（它们做的事情几乎相同），但我相信值得检查这是否比调用您的 @987654324 更快data数组中每个对象的@函数。

第二种选择更简单：不要删除这两个属性，只需将它们留在那里并且不要使用它们！

当您将 CSV 加载到 data 数组时，您不必使用每个对象中的所有属性来进行可视化。你可以简单地忽略它们。您可能会浪费更多的处理时间来操作那个 巨大的 数组，而不是简单地将这两个额外的对象留在那里。

第三种选择是合乎逻辑的：因为绝对没有办法您将在 dataviz 中使用 740k 对象，请考虑在将其发送到客户端之前过滤/减少/裁剪此 CSV .

【讨论】：