解析 CSV 文件

Question

我是 d3.js 的新手。我只想在我的分区图中显示功能分类结果(just like this)。

最理想的情况显示category在最内圈；此外，gene full names出现在最外圈。

目前我有一组CSV格式的数据。下一步是将其转换为 JSON 格式。

给定的数据格式（VFs.csv）：

Name,Category
CT396,"Adherence"
htpB,"Adherence"
msbA,"Adherence"
rfaE,"Adherence"
flgK,"Motility"
flhA,"Motility"
fliF,"Motility"
...

我正在尝试这样做：

d3.csv("VFs.csv", function(d) {
    return {
        gene : d.Name,
        Category : d.Category,
        time : 1
    };
});

D3 分区插件要求的格式：

var data = {
        "data": [{
        "Category": "Adherence",
            "data": [{
            "gene": "CT396",
            "time": 1
        }, {
            "gene": "htpB",
            "time": 1
        }, {
            "gene": "msbA",
            "time": 1
        }, {
            "gene": "rfaE",
            "time": 1
        }]
    }, {
        "Category": "Motility",
            "data": [{
            "gene": "flgK",
            "time": 1
        }, {
            "gene": "flhA",
            "time": 1
        }, {
            "gene": "fliF",
            "time": 1
        }]
    }]
};

这是我目前所掌握的。 (Demo Link)

JSON 输入是手动创建的，但我不知道如何从 CSV 格式构建分层 JSON 对象。

感谢任何帮助！

Answer 1

试试这个变量数据 = [];

 d3.csv("VFs.csv", function(d) {
    data.push({
      Category: d.Category,
      data: [{
        gene: d.gen,
        time: 1
      }]
    })
 })

Answer 2

您可以使用 d3.nest 轻松完成此操作。

但是，由于您希望这些属性名称出现在您想要的结果中，您可以使用 forEach、filter 和 map 的组合来创建数据数组。

这是一个演示。 console.log 中的结果对应于您的 data.data 数组：

var csv = d3.csvParse(d3.select("#csv").text());

var data = [];
[...new Set(csv.map(d => d.Category))].forEach(d => {
  data.push({
    Category: d,
    data: csv.filter(e => e.Category === d).map(f =>
      ({
        gene: f.Name,
        time: 1
      }))
  });
})

console.log(data)

pre {
  display: none;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<pre id="csv">Name,Category
CT396,"Adherence"
htpB,"Adherence"
msbA,"Adherence"
rfaE,"Adherence"
flgK,"Motility"
flhA,"Motility"
fliF,"Motility"</pre>

PS：我正在使用 <pre> 元素来存储您的 CSV。

解析 CSV 文件

Parsing CSV Files

csv

json

bioinformatics

d3.js