d3.js - d3.js とクロスフィルター データを使用してヒストグラムを作成する方法は?

Question

これが私のデモです (恒久的なリンク。読み込みに数秒かかる場合があります)。

私はそれにいくつかの問題を抱えています：

1. クロスフィルター キーは上限を反映しません。したがって、x 軸には 1 つのステップがありません。

   

   1 つのグループ ステップ サイズ ( ) を取得group.all()[1] - group.all()[0]し、それをd3.extent(group.all())[1]. これは汚い修正であるため、デモには含めませんでした (データ ギャップによって存在する可能性があります)。グループステップサイズを取得/x軸を修正するための汚れの少ない方法は何ですか?

2. バーの間に不均一なギャップがあります。異なるデータ セットとの x.scale の不一致を修正する方法がわかりません。

   

   バーの幅を使用可能なグラフの幅に自動的に適応させたい。したがって、最適な棒の幅を計算し、(必要に応じて) グラフ自体のサイズを変更します。

   bar_width = math.round(graph_width/data_length);
   graph_width = bar_width*data_length;
   

   この条件下では、x.scaleどのキー値に対しても不均等なデータを返す方法はありませんが、実際にはそうです。魔法はありません。私は単に何かを見落としています。しかし、それは何ですか？

   x.scale がめちゃくちゃな場合は、範囲を設定する前にbar_widthからを差し引くと、問題が修正されます。ただし、 x.scale が期待どおりに動作していないことを検出する条件がわかりません。graph_widthx.scale

Answer 1

私はこれを行う正しい方法を見つけようと多くの時間を費やしました. ただし、単純な計算を使用してデータの上限を推測することになりました。極値を視覚的にどう扱うかなど、まだまだ解決すべき課題は多い。

再利用可能なヒストグラム ライブラリを開発する試みは、githubでアクセスできます。