javascript - D3 按名称而不是值对分层条进行排序

Question

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

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

Answer 1

默认情况下，分区布局按其关联的数值排序，但您可以通过调用sortwhich expect 具有两个参数的函数来设置自己的比较器来相互比较。

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

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

对此

var hierarchy = d3.layout.partition()
  .value(function(d) { return d.size; })
  .sort(function(a, b){
      return a.name.toLowerCase() > b.name.toLowerCase();
  });

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

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

---

编辑：

似乎在展开查询栏时，某些名称的排序不正确。更改比较器的返回值在我的端修复它（Chrome）

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