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

Question

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

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

x 轴:药物类别

y 轴:药物类别数 x S 类别

我目前的里程碑:

1. 在工具提示中，我试图索引相应的 x 轴标记以定义为“药物类别”，但我一直坚持索引正确的值，因为我正在处理的数组是嵌套的:

如何指向第一层 nestedData 中的“关键”值 (1,2,3,4,5,6)，以便在工具提示中将其定义为药物类别？

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

我认为代码应该类似于:

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

我应该如何使用单选按钮触发的动画来实现排序？类似这样的效果:

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

感谢任何帮助。

Answer 1

关于工具提示问题:外部数组的数据绑定(bind)到包含矩形的组。

因此，可以通过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 的域。因此，除非您更改每个组的域(这在数据可视化中不是一个好的做法)，否则您无法对组内的条形进行排序。

这里是更新的区 block 生成器:https://blockbuilder.org/GerardoFurtado/f4b4608bf07588f2b9291ac74c88f82c