Question

我正在尝试将CSV数据文件加载到d3树形图中。我可以使用json数据版本，但d3.csv解析器不会返回相同的字符串。

我尝试过：

treeData.forEach(function (d) {

和：

data.map(function(d) { return [ d[" "],

但这些参考特定的标头字符串

我需要将d3.csv结果包装为：

{name: "root", children: []}

但不使用jsontostring

以下显示了我一直在使用的内容以及chrome控制台中的结果：

treeJSON = d3.json("test.json", function(error, treeDataJSON) { console.log(treeDataJSON); });

结果：{名称：“ root”，子级：Array（6）} 子代：Array（6） 0：{名称：“ A”，值：“ v1”，更多值：“ v7”} 1：{名称：“ B”，值：“ v2”，更多值：“ v8”} 2：{名称：“ C”，值：“ v3”，更多值：“ v9”} 3：{名称：“ D”，值：“ v4”，更多值：“ v10”} 4：{名称：“ E”，值：“ v5”，更多值：“ v11”} 5：{名称：“ F”，值：“ v6”，更多值：“ v12”}

treeCSV = d3.csv("test.csv", function(error, treeDataCSV) { console.log(treeDataCSV); });

结果：（6）[{…}，{…}，{…}，{…}，{…}，{…}] 0：{名称：“ A”，值：“ v1”，更多值：“ v7”} 1：{名称：“ B”，值：“ v2”，更多值：“ v8”} 2：{名称：“ C”，值：“ v3”，更多值：“ v9”} 3：{名称：“ D”，值：“ v4”，更多值：“ v10”} 4：{名称：“ E”，值：“ v5”，更多值：“ v11”} 5：{名称：“ F”，值：“ v6”，更多值：“ v12”}

Answer 1

解决方案非常简单：在回调内部，只需声明一个文字对象，然后使用解析后的数据（您命名为treeDataCSV）来设置children值即可：

const treeData = {
    name: "root",
    children: treeDataCSV
};

这是一个简单的演示，使用d3.csvParse而不是d3.csv，但是解决方案完全相同：

const csv = `name,values,more values
A,v1,v7
B,v2,v8
C,v3,v9
D,v4,v10
E,v5,v11
F,v6,v12`;

const treeDataCSV = d3.csvParse(csv);

const treeData = {
  name: "root",
  children: treeDataCSV
};

console.log(treeData)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

值得一提的是，鉴于您的d3.csv签名，您使用的是D3 V4或更低版本。在这种情况下，您将无法像所做的那样执行treeCSV = d3.csv(etc...。有关说明，请在这里查看：d3.json doesn't return my data array in D3 v4

将csv解析为具有额外属性的对象

1 个答案: