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.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。

Answer 2

试试这个 var data = [];

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

解析CSV文件

2 个答案: