2013-09-30 11 views
10

Szukałem na crossfilter głównejcrossfilter, d3.brush i nvd3 integracja

I naprawdę lubią to, co się dzieje. Ale nie chcę pisać wszystkich wykresów, jeśli nie potrzebuję. Już sprawdziłem, co jest całkiem niezłe i daje wbudowaną integrację i filtrowanie crossfilter.

Jednak w dc brakuje niektórych rzeczy, których potrzebuję, które otrzymuję z nvd3. Jednak uzyskanie dowolnego rodzaju filtrowania krzyżowego (za pomocą pędzla lub kliknięcia itp. W zależności od rodzaju wykresu) za pośrednictwem filtru krzyżowego w/na wierzchu nvd3 wygląda na dużo pracy. Nie widziałem ani nie słyszałem żadnego rodzaju tej pracy, ale wygląda na naturalną progresję nvd3.

Czy dodawanie filtrowania krzyżowego i filtrów krzyżowych do Nvd3 jest łatwe i czy po prostu nie mogę się z tym pogodzić?

W jaki sposób ludzie dokonują tego?

Dzięki.

+0

Nie jestem świadomy takiej integracji. Jeśli to łatwe, całkowicie zależy od twojej definicji łatwości; Na pewno nie spróbowałbym tego bez znajomości komponentów. –

+0

Robię dokładnie to samo teraz, nvd3 ma kilka ładnych wykresów, ale bez filtra, dc.js filtruje dane dobrze, ale nie tak pięknie.Czy możesz się ze mną skontaktować, abyśmy mogli podzielić się z nami doświadczeniem? [email protected] Dzięki! –

Odpowiedz

9

DC jest dobre, ponieważ można przekazywać wymiary i grupy bezpośrednio do samych obiektów wykresu i nie trzeba ręcznie aktualizować zmian w filtrze poprzecznym.

Jeśli chcesz powiązać Crossfilter i NVD3, musisz ręcznie zaktualizować domenę/zakres NVD3 lub dane dotyczące zmian stanu wymiarów/grup filtra poprzecznego. Zasadniczo wygląda to na przykładzie strony Crossfilter, jeśli sprawdzisz źródło: http://square.github.io/crossfilter/. Ilekroć pędzle się zmieniają, wykresy są przerysowywane i aktualizowane w celu odzwierciedlenia zmian.

Uzyskiwanie wykresów NVD3 w celu przerysowania i odzwierciedlenia nowych danych jest łatwe. Możesz po prostu zaktualizować bazę danych i ponownie wywołać barchart ... np.

var svg = d3.select("body").append("svg").style("height", "500px"); 
var barChart = nv.models.multiBarChart(); 

// Just execute this block each time the chart data changes 
// and the chart will update in a nicely animated manner 
svg 
    .datum(chartData) 
    .transition() 
    .duration(500) 
    .call(barChart); 

Trudna część byłaby rzeczywiście, gdybyś chciał mieć pędzle wbudowane w wykresy NVD3. To może być trudne, ponieważ musisz zachować synchronizację pędzli z wykresami NVD3, ponieważ ich dane zostały zmienione, tak aby były poprawnie rysowane, ale jeśli chcesz po prostu poprawnie zaktualizować wykres NVD3 w oparciu o zdarzenia pędzla na innym wykresie lub w ogóle nie zależy ci na pędzlach, nie powinno to być zbyt trudne. Dobry samouczek dotyczący pędzli znajduje się tutaj: http://bl.ocks.org/mbostock/1667367

Mimo to NVD3 bardzo dobrze eksponuje niemal wszystkie leżące u podstaw komponenty wykresów (skale, osie itp.), Co oznacza, że ​​można uzyskać dostęp, dodawać i aktualizować w razie potrzeby pędzla, a następnie zarejestruj zdarzenia pędzla, zaktualizuj filtr crossfilter, a następnie ponownie rysuj wykresy według potrzeb.

To także open source, więc twoja druga opcja to rozwidlenie repozytorium i dodanie obsługi pędzla i zdarzeń bezpośrednio do źródła.

Osobiście posiadam niestandardowy wykres osi czasu, który wykonałem, który wykorzystuje zdarzenia pędzli i pożarów po zaktualizowaniu pędzla. W przypadku zdarzeń aktualizuję dane dla ułożonego na stosie wykresu słupkowego NVD3 i przerysowuję go. Kiedy zmieniasz filtr osi czasu, wykres słupkowy animuje się i aktualizuje. To całkiem sprytne widzieć to w akcji.

Tak czy inaczej, brzmi jak interesujące wyzwanie. Powodzenia!

+0

Dzięki za odpowiedź. Mogę dać mu szansę. Jeśli chodzi o Square (crossfilter), mają też naprawdę fajną deskę rozdzielczą wypełnioną wykresami. Wykresy można przesuwać/filtrować, automatycznie aktualizując pozostałe wykresy. Dodatkowo podpowiedzi wyskakują po najechaniu kursorem na poszczególne paski. Niestety wygląda na to, że nvd3 nie oferuje zintegrowanego crossfilteringu, a podczas gdy dc oferuje to, podczas używania pędzla, podpowiedź podpowiedzi zostaje wyłączona z powodu warstwy zacisku pędzla. Naprawdę, naprawdę chciałbym mieć zarówno pędzel, jak i podpowiedzi. Być może będę musiał przetoczyć, być może. – lostdorje