Jak utworzyć histogram przy użyciu danych d3.js i crossfiltra?

Question

Oto mój demo (łącze stałe, może zająć sekundę, aby załadować).

Mam kilka problemów z nim:

1. Klawisz crossfilter nie odzwierciedla górną granicę. Dlatego na osi X brakuje jednego kroku.

   

   udało mi się go naprawić poprzez uzyskanie jeden rozmiar grupa etap (group.all()[1] - group.all()[0]), a następnie dodanie go do d3.extent(group.all())[1]. Ponieważ jest to brudna poprawka, nie włączałem tego do wersji demonstracyjnej (może to wynikać z luki danych). Jaki jest mniej brudny sposób na uzyskanie rozmiaru kroku grupy/naprawienie osi X?

2. Występują nierównomierne odstępy między prętami. Nie mogę wymyślić, jak naprawić niezgodność x.scale z różnymi zestawami danych.

   

   chcę pasek szerokości automatycznie dostosować do dostępnej szerokości wykresu. Dlatego też obliczyć optymalną szerokość bar, a następnie (w razie potrzeby) rozmiaru wykresu sam:

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

   W tych warunkach nie ma możliwości x.scale może powrócić nierówne danych dla każdej wartości klucza, a mimo to robi. Nie ma magii; Po prostu coś przeoczam. Ale co to jest?

   Kiedy x.scalejest zawiedli następnie odjęcie bar_width z graph_width przed ustawieniem zakresu x.scale rozwiązuje ten problem. Chociaż nie potrafię wykryć warunku wykrycia, kiedy x.scale nie działa zgodnie z oczekiwaniami.

Answer 1

Spędziłem dużo czasu próbując znaleźć właściwą drogę do tego. Jednak skończyło się na zastosowaniu prostej matematyki do odgadnięcia górnej granicy danych. Istnieje wiele problemów, które jeszcze nie zostały rozwiązane, na przykład, jak wizualnie radzić sobie z ekstremami.

Moja próba opracowania wielokrotnego użytku bibliotekę histogramu jest dostępny on github.