JSON и D3, меняйте только имена дочерних ключей, но оставляйте родительские

Question

JSON и D3, меняйте только имена дочерних ключей, но оставляйте родительские

1

Чтобы графики D3 работали правильно, мне нужно, чтобы имена детей не были "ключевыми", а "метками". Родители все еще должны быть "ключевыми".

Вот мой код и вывод. Ниже, это пара вещей, которые я пробовал, но безуспешно.

Протяжьте цель, если это возможно: я не обязательно хочу "жестко" ее тоже. Я хотел бы иметь возможность изменить любой уровень (только на первом уровне в этом случае) имен детей на все, что я хочу ("метка" в этом случае).

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>

Пример отсюда - это первое, на что я смотрел.

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

Заранее спасибо!

ConfusedBusinessGuy 12 фев. 2018, в 17:22

Источник

Теги:

javascript

d3.js

json

1 ответ

Ещё вопросы

Shashank · Accepted Answer · 2018-02-12T16-19-00.000Z

Вы можете использовать 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>

И если вы ищете картографирование детей, используйте что-то вроде этого:

.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 в соответствии с требованиями.

Надеюсь это поможет.

Ты гвоздик, мой друг. Отлично сработано.
Хаха спасибо. Рад, что смог помочь!