Skocz do zawartości
nowy_user

Wykres liniowy - zaokrąglony

Rekomendowane odpowiedzi

Cześć chłopaki, 

chciałbym zrobić ładnie wyglądający wykres liniowy. Aby stworzyć zwykły wykres ( bez zaokrągleń) stworzyłem sobie pętle for, która zazznacza punkty na wykresie ( x i y), a następnie łączy je liniamy rysowanymi przez zapętloną funkcję draw_line.

 

Problem w tym, że taki wykres wygląda nieestetycznie, ponieważ linia załamuje się w kanciasty sposób, coś w stylu:

Wizualizacja danych z D3.js #3 Wykres liniowy z SVG więcej

 

 Ja natomiast chciałbym, aby linia była bardziej płynna, zaokrąglona. I teraz tak, myślałem o tym, abyt zasotoswać krzywą beizera, po prostu wstawiając i rysując Path  z punktami wykresu z zaznaczoną opcją Smooth curve   ( bo jak się domyślam, w takiej sytuacji gm stosuje krzywą beizera). Natomiast tu jest jeden problem. Linia nie przechodzi dokładnie przez punkty wykresu, przez co wykres jest przekłamany:

 

image.png.17fe114125c60c2196de9cde797d848f.png

Pytane: Jak narysować płynny, zaokrąglony wykres, aby przechodził on dokładnie przez wyznaczone punky?

 

 

 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Nie wiem, czy żeby przechodził dokładnie przez punkty, to będzie krzywa beziera. Bardziej mi się wydaje, że tutaj linie powinny być rysowane za pomocą jakichś ease-in itp. funkcji, pół od punktu A do połowy punktu B, drugi od połowy drogi do punktu B do samego B. Czyli wszelkie funkcje od easing/tweening by się przydały. Bo bezierem jak przesuniesz jeden punkt to i pozostałe się ruszają.

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Zmień te punkty na path i użyj smooth. Taniej się nie da.

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Dnia 5.12.2020 o 14:32, Uzjel napisał:

Zmień te punkty na path i użyj smooth. Taniej się nie da.

 

No właśnie też tak na początku myślałem, ale tak jak pisałem w pierwszym poście, ale gdy oznaczymy path "curved" to linia nie przechodzi przez wyznaczone punkty, tylko obok nich (nie wiem czy to traktować jako bug GMa czy taki był zamył).  interpolacją Catmulla-Roma wydaje się tutaj lepiej pasować, ale niestety w internecie są tylko skrypty dla pythona  oraz C++.  Easingi, które zaproponował Gnysek też by zdały egzamin, tylko tutaj musiałbym rysować krzywą jako zbiór małych kropek obawiam się, że to pochłaniałoby sporo pam ięci, bo jeśli wykres miałby szerokość 200 px to krzywa miałaby ponad 200 rysowanych kropek.

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Nie muszą być kropki, możesz sam wybrać rozmiar. Zresztą, kolejny raz doszukujesz się problemów z optymalizacją, zanim do nich dojdziesz - 200 kropek to jest pikuś dla dzisiejszego komputera. Zawsze możesz też zrobić surface, narysować i utworzyć z tego sprite i wtedy w kolejnych krokach nic nie musisz zmieniać.

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

No w sumie, jest to jakiś pomysł, zastosuję i zobaczę w profilerze, jakie będzie zużycie pamięci. 200 kropek to może i pikuś dla dzisiejszego komputera, natomiast ja też tworzę z myślą o mobile, więc tu muszę być szczególnie ostrożny jeśli chodzi o performance. Dzięki za pomoc :)

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Uwielbiam to Twoje podejście, w którym w ogóle czegoś nie spróbowałeś, ale już martwisz się o performance, chociaż to z palcem w nosie pójdzie w 1000 fps :) Naprawdę, nie od tego zaczynaj, to nie będzie aż tak zasobożerne jak próbujesz sobie wmówić.

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się tutaj.

Zaloguj się tutaj

  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

×