创建键,值对JSON通过巢在D3
Create key, value pair for JSON via nest in D3
我想使用d3.nest()
为JSON创建一个键,值对。
原始JSON是这样的:
[
{
"Country": "Mexico",
"Climate": 100,
"Safety Index": 50,
"Life Expectancy": 80,
"Corruption": 30,
"Per Capita Income": 20
},
{
"Country": "UK",
"Climate": 70,
"Safety Index": 80,
"Life Expectancy": 70,
"Corruption": 70,
"Per Capita Income": 80
},
{
"Country": "US",
"Climate": 80,
"Safety Index": 70,
"Life Expectancy": 90,
"Corruption": 70,
"Per Capita Income": 80
}
]
我想把它变成这样:
[
{"key": "Mexico", "value":
[
{ "key": "Climate", "value": 100 },
{ "key": "Safety Index", "value": 50 },
{ "key": "Life Expectancy", "value": 80 },
{ "key": "Corruption", "value": 30 },
{ "key": "Per Capita Income", "value": 20 }
]},
{"key": "UK", "value":
[
{ "key": "Climate", "value": 70 },
{ "key": "Safety Index", "value": 80 },
{ "key": "Life Expectancy", "value": 70 },
{ "key": "Corruption", "value": 70 },
{ "key": "Per Capita Income", "value": 80 }
]},
{"key": "US", "value":
[
{ "key": "Climate", "value": 80 },
{ "key": "Safety Index", "value": 70 },
{ "key": "Life Expectancy", "value": 90 },
{ "key": "Corruption", "value": 70 },
{ "key": "Per Capita Income", "value": 80 }
]}
]
我的尝试:
var nest = d3.nest()
.key(function(d) { return d.Country; })
.entries(data);
我的问题是非常基本的,因为我是D3的新手。我该如何在D3中改变JSON的结构?编辑
这是为了根据不同的类别为每个国家创建一个单独的条形图,类似于本示例(http://bl.ocks.org/mbostock/5872848)。如果有更好的方法来思考这个问题,请告诉我。
如果您想要得到您所提供的确切输出,并且坚持使用嵌套,您可以使用:
var nest = d3.nest()
.key(function(d) { return d.Country; })
.rollup(function(d) {
var countryGroupedObject = d[0];
return d3.nest()
.key(function(innerKey) { return innerKey; })
.rollup(function(innerKey) { return countryGroupedObject[innerKey]; })
.entries(Object.keys(countryGroupedObject));
})
.entries(data);
这里的一个潜在问题是,你假设每个国家都是唯一的(例如,不会有两个"墨西哥"条目)。因此,内巢只在d[0]
上运行(这将是给定国家列出的第一个项目)。
Edit:实际上,这不会是完全您所要求的,国家键:值将存在于内部分组中。如果这是一个问题,可以通过在内部巢之前放置以下内容来忽略它:delete countryGroupedObject.Country;
编辑2:上面的代码使用嵌套的nest
函数仅仅是因为问题是这样问的。在实际系统中,内部nest
对我来说更有意义的是纯Javascript,沿着以下行:
function getGraphParams(countryObj){
return Object.keys(countryObj)
.filter(function(key){ return key !== "Country"; })
.map(function(key){ return { key: key, value: countryObj[key] }; })
}
这是一个没有D3的解决方案:
var a = ...; // Original Array of JSON
var b = [];
a.forEach(function(item) {
var r = {};
r.key = item.Country;
r.value = [];
for (var i in item) {
if (i === "Country") { continue; }
r.value.push({"key": i, "value": item[i]});
}
b.push(r);
});
不知道为什么你只使用"键"作为你的键和"值"为你的值键虽然,这似乎违背了在JSON中使用隐式键和值的观点。但是我认为你这样做是有原因的。
你说:
如果有更好的方法来思考这个问题,请告诉我。
如果你要改变你的数据结构,为什么不把它变成这样呢?
[
["Mexico", 100, 50, 80, 30, 20],
["UK", 70, 80, 70, 70, 80],
["US", 80, 70, 90, 70, 80],
]
它要小得多,而且没有冗余。
如果您希望您的结构尽可能接近代码示例的数据结构,我仍然建议坚持使用您的原始数据结构,因为原始数据结构中的CSV文件被转换为与原始JSON文件的数据结构几乎相同的数据结构。
相关文章:
- 在d3.json中使用d3.csv组合多个csv文件数据输入的最佳方法是什么
- 如何在d3之外调用d3.json()
- 如何动态地决定并告诉d3.json()函数何时使用哪个json
- 通过flask服务器上的队列访问d3.json对象时出现问题
- D3 Json请求获取XmlHttpRequest错误:访问控制允许原点不允许原点为null
- 使用 d3.xml 而不是 d3.json 绘制可折叠缩进树
- d3.json Troubles
- d3.json有效,但$.getJson失败
- 从 PHP 使用 D3.json() 获取 JSON 数据不起作用
- 使用和不使用 d3.json() 驱动 D3 图表
- 遇到 d3.json 问题,不起作用
- 如何使用链接属性值作为变量在d3.json()方法中加载json
- Handle with d3.json
- 在d3.json中编写一个自定义函数
- 为什么d3.json会返回"空”;
- D3.js D3.json返回Uncaught TypeError:无法读取属性'0'的未定义
- d3.csv vs d3.json:无法读取属性'长度'的未定义使用JSON数据
- d3.json不接受要在d3-gantt图表中绘图的查询结果
- 如何将d3.json调用中作为变量存储的返回数据作为参数传递给circular radius
- 使用d3.json()访问嵌套JSON