[英]JSON and D3, Change only children key names but leave parent
In order to make my D3 graphs work correctly, I need the children's names to not be "key" but "label".为了使我的 D3 图表正常工作,我需要孩子的名字不是“关键”而是“标签”。 The parents still need to be "key".
父母仍然需要成为“关键”。
Here is my code and the output.这是我的代码和输出。 Below that is a couple things I've tried, without success.
下面是我尝试过的几件事,但没有成功。
Stretch goal, if possible: I don't necessarily want to "hardcode" it either.如果可能,扩展目标:我也不一定要“硬编码”它。 I'd like to be able to change any level (just the first level in this case) of children's names to whatever I want ("label" in this case).
我希望能够将孩子的名字的任何级别(在这种情况下只是第一级)更改为我想要的任何级别(在这种情况下为“标签”)。
var csv = `breakfastItem,gluten,breakfastItemType,month,year,dateCode,value Bagel,Yes,Cinnamon Raisin,May,2017,42856,300 Bagel,Yes,Cinnamon Raisin,March,2017,42795,100 Bagel,Yes,Cinnamon Raisin,November,2016,42675,20 Bagel,Yes,Blueberry,February,2017,42767,50 Bagel,Yes,Blueberry,November,2016,42675,30 Bagel,Yes,Blueberry,March,2016,42430,100 Bagel,Yes,Plain,February,2018,43132,200 Bagel,Yes,Plain,December,2017,43070,202 Bagel,Yes,Plain,February,2016,42401,201`; var data = d3.csvParse(csv, function(d) { d.value = +d.value; d.year = +d.year; d.dateCode = +d.dateCode; return d; }); var breakfastCombinations = d3.nest() .key(function(d) { return d.breakfastItem; }) .key(function(d) { return d.breakfastItemType; }) .rollup(function(oldestDate) { return oldestDate.sort(function(a, b) { return b.dateCode - a.dateCode })[0].value }) .entries(data); console.log(breakfastCombinations)
<script src="https://d3js.org/d3.v4.min.js"></script>
Example from here is the first thing I looked at.这里的例子是我看到的第一件事。
var expenseMetrics = d3.nest()
.key(function(d) { return d.name; })
.rollup(function(v) { return {
count: v.length,
total: d3.sum(v, function(d) { return d.amount; }),
avg: d3.mean(v, function(d) { return d.amount; })
}; })
This second example is something I believe could work, but I'm not sure how to access the children and not just the parent.我认为第二个示例可行,但我不确定如何访问孩子而不仅仅是父母。
breakfastCombinations.forEach(function(d) {
d.label = d.key;
});
Thanks in advance!提前致谢!
You can use d3.map to map the items:您可以使用d3.map来映射项目:
For example, if you're looking for parent mapping from "key" to "label", use the following:例如,如果您要查找从“key”到“label”的父映射,请使用以下命令:
.entries(data).map(function(group) {
// parent mapping
return {label: group.key, values: group.values};
})
var csv = `breakfastItem,gluten,breakfastItemType,month,year,dateCode,value Bagel,Yes,Cinnamon Raisin,May,2017,42856,300 Bagel,Yes,Cinnamon Raisin,March,2017,42795,100 Bagel,Yes,Cinnamon Raisin,November,2016,42675,20 Bagel,Yes,Blueberry,February,2017,42767,50 Bagel,Yes,Blueberry,November,2016,42675,30 Bagel,Yes,Blueberry,March,2016,42430,100 Bagel,Yes,Plain,February,2018,43132,200 Bagel,Yes,Plain,December,2017,43070,202 Bdagel,Yes,Plain,December,2017,43070,202 Bagel,Yes,Plain,February,2016,42401,201`; var data = d3.csvParse(csv, function(d) { d.value = +d.value; d.year = +d.year; d.dateCode = +d.dateCode; return d; }); var breakfastCombinations = d3.nest() .key(function(d) { return d.breakfastItem; }) .key(function(d) { return d.breakfastItemType; }) .rollup(function(oldestDate) { return oldestDate.sort(function(a, b) { return b.dateCode - a.dateCode })[0].value }) .entries(data).map(function(group) { // parent mapping return {label: group.key, values: group.values}; }) console.log(breakfastCombinations);
<script src="https://d3js.org/d3.v4.min.js"></script>
And if you're looking for children mapping, use something like this:如果您正在寻找儿童映射,请使用以下内容:
.entries(data).map(function(group) {
// children mapping
return {key: group.key, values: group.values.map(function(d) { return {label: d.key, value: d.value}})};
})
var csv = `breakfastItem,gluten,breakfastItemType,month,year,dateCode,value Bagel,Yes,Cinnamon Raisin,May,2017,42856,300 Bagel,Yes,Cinnamon Raisin,March,2017,42795,100 Bagel,Yes,Cinnamon Raisin,November,2016,42675,20 Bagel,Yes,Blueberry,February,2017,42767,50 Bagel,Yes,Blueberry,November,2016,42675,30 Bagel,Yes,Blueberry,March,2016,42430,100 Bagel,Yes,Plain,February,2018,43132,200 Bagel,Yes,Plain,December,2017,43070,202 Bdagel,Yes,Plain,December,2017,43070,202 Bagel,Yes,Plain,February,2016,42401,201`; var data = d3.csvParse(csv, function(d) { d.value = +d.value; d.year = +d.year; d.dateCode = +d.dateCode; return d; }); var breakfastCombinations = d3.nest() .key(function(d) { return d.breakfastItem; }) .key(function(d) { return d.breakfastItemType; }) .rollup(function(oldestDate) { return oldestDate.sort(function(a, b) { return b.dateCode - a.dateCode })[0].value }) .entries(data).map(function(group) { // children mapping return {key: group.key, values: group.values.map(function(d) { return {label: d.key, value: d.value}})}; }) console.log(breakfastCombinations);
<script src="https://d3js.org/d3.v4.min.js"></script>
Basically, you can use manipulate the array using d3.map as per the requirements.基本上,您可以根据要求使用 d3.map 操作数组。
Hope this helps.希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.