对条形图进行排序并在分组条形图中获取分组数据

Question

在过去的几天里，我一直在尝试自学 Javascript 以进行数据可视化，并且正在努力/努力使用分组条形图。

正在进行中的图表： https://blockbuilder.org/lydiawawa/261aebe55bef8b556d257f3693cca37e

x 轴：药物类别

y 轴：药物类别计数 x S 类别

我目前的里程碑：

1. 在工具提示中，我尝试将相应的 x 轴标记编入索引以定义为“药物类别”，但由于我正在处理的数组是嵌套的，所以我坚持索引正确的值：

如何指向第一级nestedData中的'key'值（1,2,3,4,5,6），以便在tooltip中定义为药物类别？

1. 如何按升序对组内计数进行排序？

我认为代码应该类似于：

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