javascript - JSON 和 D3，仅更改子键名称但保留父键

Question

为了使我的 D3 图表正常工作，我需要 child 的名字不是“键”而是“标签”。 parent 还是要当“ key ”。

这是我的代码和输出。下面是我尝试过的几件事，但没有成功。

延伸目标，如果可能的话:我也不一定要“硬编码”它。我希望能够将 child 名字的任何级别(在本例中只是第一级)更改为我想要的任何名称(在本例中为“标签”)。

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>

示例来自 here是我首先看到的东西。

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; })
}; })

我认为第二个示例可行，但我不确定如何访问子项而不仅仅是父项。

breakfastCombinations.forEach(function(d) {
  d.label = d.key;
});

提前致谢!

Answer 1

您可以使用 d3.map映射项目:

例如，如果您正在寻找从“键”到“标签”的父级映射，请使用以下内容:

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

如果你正在寻找 child 映射，使用这样的东西:

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

基本上，您可以根据需要使用 d3.map 操作数组。

希望这对您有所帮助。