javascript - D3 値ではなく名前で階層バーを並べ替える

Question

D3 階層バーの例に基づいてプレゼンテーション ツールを作成しています: https://github.com/devsar/d3talk/blob/master/hierarchical-bar.html

階層を値ではなく名前でソートするオプションを追加するにはどうすればよいでしょうか?

Answer 1

デフォルトでは、パーティション レイアウトは関連する数値で並べ替えられますが、sort互いに比較する 2 つのパラメーターを持つ関数を呼び出すことで、独自のコンパレーターを設定できます。

バーを名前で並べ替えるには、これらの行を変更するだけです

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());