D3制作新的较小的CSV文件 [英] D3 making new, smaller CSV file

问题描述

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

I'm stuck with a quite simple problem and need help.

我有一个很大的CSV文件，其中包含50列，我绝对无法修改.

I have a big CSV file with 50 columns which i absolutely can't modifie.

现在我想制作一张图表，其中只需要5-6列即可.

Now i want to make a chart where i only need 5-6 columns out of it.

我现在的想法是制作一个新的"data2"，其中仅包含这5-6列(包含键和所有内容)，并使用此data2.

My idea was now to make a new "data2" which contains only these 5-6 columns (with key and evertything) and work with this data2.

但是我无法创建此数据2.

But i'm not able to create this data2.

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

To filter which columns i need i wanted to work with regex. Something like this:

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

但是我该如何创建新的data2?我确定我需要使用d3.map，但是即使使用api，我也无法理解它如何正常工作.

But how do i create the new data2 then? I'm sure i need to work with d3.map but even with the api i'm not able to understand how it works correctly.

有人可以帮我吗?

推荐答案

首先，您的问题的标题具有误导性:您并不是要制作更小的 CSV文件，因为该文件本身不是改变了.您要询问的是在解析CSV时更改D3创建的数据数组.

Firstly, your question's title is misleading: you're not asking about making a smaller CSV file, since the file itself is not changed. You're asking about changing the data array created by D3 when that CSV was parsed.

这使我们得出第二点:您不需要这样做.由于您已经浪费了一些时间/资源来加载CSV和解析该CSV，因此最好的办法就是保持它的状态不变，并仅使用所需的5列.如果尝试过滤掉某些列(这意味着从数组中的每个对象删除某些属性)，则只会添加更多不必要的任务供浏览器执行.更好的办法是更改CSV本身.

That brings us to the second point: you don't need to do that. Since you already lost some time/resources loading the CSV and parsing that CSV, the best idea is just keeping it the way it is, and using only those 5 columns you want. If you try to filter some columns out (which means deleting some properties from each object in the array) you will only add more unnecessary tasks for the browser to execute. A way better idea is changing the CSV itself.

但是，如果您确实要执行此操作，则可以使用d3.csv在加载CSV时创建的array属性(称为columns)和for...in循环，以从每个对象中删除某些属性.

However, if you really want to do this, you can use the array property that d3.csv creates when it loads an CSV, called columns, and a for...in loop to delete some properties from each object.

例如，在这里...

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

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

... I'm getting the first 4 columns in the CSV. Then, I use this array to delete, in each object, the properties regarding all other columns:

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列:

Here is a demo. I'm using a <pre> element because I cannot use a real CSV in the Stack snippet. My "CSV" has 12 columns, but my filtered array keeps only the first 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文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！