Question

我遇到了一个非常简单的问题，需要帮助。

我有一个包含50列的大型CSV文件，我绝对无法修改。

现在我想制作一个图表，其中我只需要5-6列。

我的想法是制作一个新的＆＃34; data2＆＃34;它只包含这些5-6列（带有键和evertything）并使用此数据2。

但我无法创建此数据2.

要过滤我需要哪些列，我想使用正则表达式。像这样：

d3.keys(data[0]).filter(function(d) { return d.match(/.../); })

但是我如何创建新数据呢？我确定我需要使用d3.map，但即使api我也无法理解它是如何正常工作的。

有人能帮助我吗？

Answer 1

首先，你的问题的标题是误导性的：你不是在问一个较小的 CSV文件，因为文件本身没有改变。您要求在解析CSV时更改D3创建的数据阵列。

这将我们带到第二点：你不需要这样做。由于您已经丢失了加载CSV并解析该CSV的一些时间/资源，因此最好的想法就是保持它的原样，并且只使用您想要的那5列。如果您尝试过滤掉某些列（这意味着从数组中的每个对象中删除一些属性），则只会添加更多不必要的任务以供浏览器执行。更好的想法是改变CSV本身。

但是，如果您真的想这样做，可以使用d3.csv在加载CSV时创建的数组属性，称为columns，并使用for...in循环删除某些每个对象的属性。

例如，这里......

var myColumns = data.columns.splice(0, 4);

...我正在获取CSV中的前4列。然后，我使用此数组在每个对象中删除有关所有其他列的属性：

var filteredData = data.map(function(d) {
  for (var key in d) {
    if (myColumns.indexOf(key) === -1) delete d[key];
  }
  return d;
})

这是一个演示。我正在使用<pre>元素，因为我无法在Stack片段中使用真正的CSV。我的“CSV”有12列，但我的过滤数组只保留前4列：

var data = d3.csvParse(d3.select("#csv").text());
var myColumns = data.columns.splice(0, 4);
var filteredData = data.map(function(d) {
  for (var key in d) {
    if (myColumns.indexOf(key) === -1) delete d[key];
  }
  return d;
})

console.log(filteredData)

pre {
  display: none;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<pre id="csv">foo,bar,baz,foofoo,foobar,foobaz,barfoo,barbar,barbaz,bazfoo,bazbar,bazbaz
1,2,5,4,3,5,6,5,7,3,4,3
3,4,2,8,7,6,5,6,4,3,5,4
8,7,9,6,5,6,4,3,4,2,9,8</pre>

D3制作新的较小的CSV文件

1 个答案: