Сортировка баров и получение групповых данных на сгруппированной гистограмме

Question

В последние пару дней я пытался самостоятельно изучить Javascript для визуализации данных и работаю / борюсь с сгруппированной гистограммой.

Диаграмма в работе: https://blockbuilder.org/lydiawawa/261aebe55bef8b556d257f3693cca37e

Ось X: Категории лекарств

Ось Y: Количество категорий лекарств x S Категории

Myтекущие этапы:

1. Во всплывающей подсказке я попытался проиндексировать соответствующую метку оси x, которая должна быть определена как «Категория препарата», но я застрял при индексации правильных значений, потому что массив I 'm имеет дело с вложенным:

Как мне указать значение ключа (1,2,3,4,5, 6) на первом уровне nestedData, чтобы он определялся как категория наркотиков во всплывающей подсказке?

Как отсортировать счетчики внутри группы в порядке возрастания?

Я думаю, что код должен быть похож на:

nestedData.sort(function(x, y){
   return d3.ascending(x.value, y.value);
})

Как мне реализовать сортировку с анимацией, запускаемой переключателем?Аналогично этому эффекту:

https://bl.ocks.org/fabiomainardi/2971d4ac0978634c3d15

Благодарим за любую помощь.

Answer 1

Относительно всплывающей подсказки: данные для внешнего массива были привязаны к группам, которые содержат прямоугольники.

Следовательно, вы можете получить его с помощью this.parentNode:

const parentData = d3.select(this.parentNode).datum();

Что касается проблемы сортировки, вы можете отсортировать вложенные данные следующим образом:

nestedData.forEach(function(d){
    d.values.sort(function(a,b){
        return a.value - b.value
    });
});

Однако это не будет иметь значения любой : порядок столбцов зависит от домена, который вы передалиx1.Таким образом, если вы не измените домен для каждой группы (что не является хорошей практикой в ​​области визуализации данных), вы не сможете отсортировать столбцы внутри групп.

Вот обновленный блокостроитель: https://blockbuilder.org/GerardoFurtado/f4b4608bf07588f2b9291ac74c88f82c