D3按名称而不是值排序分层条形图

Question

我正在构建一个基于D3分层栏示例的演示工具： https://github.com/devsar/d3talk/blob/master/hierarchical-bar.html

添加选项以按名称而不是值对层次结构进行排序的最佳方法是什么？

Answer 1

默认情况下，分区布局按其关联的数值排序，但您可以通过调用sort来设置自己的比较器，该var hierarchy = d3.layout.partition() .value(function(d) { return d.size; }) .sort(function(a, b){ return a.name.toLowerCase() > b.name.toLowerCase(); }); 期望具有两个参数的函数相互比较。

要按名称对条形图进行排序，只需更改这些行

即可

https://github.com/devsar/d3talk/blob/master/hierarchical-bar.html#L48-L49

到这个

  return a.name.toLowerCase() < b.name.toLowerCase();

如果要反转排序顺序，只需返回相反的

return a.name.toUpperCase().localeCompare(b.name.toUpperCase());

---

编辑：

似乎在展开查询栏时，某些名称未正确排序。更改比较器的返回值会将其固定在我的结尾（Chrome）

{{1}}