buduję wykres słupkowy przy użyciu nvd3 za multiBarChart i trzeba dostosować położenie obróconych etykiet Oś X:Jak mogę umieścić obrócone etykiety osi X na wykresie kolumnowym przy użyciu nvd3?
var chart = nv.models.multiBarChart();
...
chart.rotateLabels(-90);
chciałbym etykiety kolumn nie pokrywają się z wykresu i być wyśrodkowane pod każdym paskiem. Mogę wybrać etykiety po wykreśleniu wykresu i dostosować je, ale czy jest łatwiejszy sposób?
Najlepszym sposobem, w jaki radziłem sobie z tym problemem, jest samodzielne wykonanie obrotu etykiet zaznaczania osi X. Czemu? Ponieważ NVD3 nie obsługuje poprawnie rotacji i powiązanych tłumaczeń. Spójrz na swój obraz, a zobaczysz, że biblioteka pozwala rotacji na tłumaczenie etykiet z bezpośrednio pod kolumnami, które reprezentują. Zaczyna także ingerować w wartości axis.tickPadding() i tak dalej.
Pierwszą rzeczą, którą musisz zrobić, to upewnić się, że wykres ma wystarczającą przestrzeń dla przetłumaczonych etykiet, tak jak poniżej:
chart.margin({bottom: 60});
Możemy tłumaczyć i obrócić etykiety:
var xTicks = d3.select('.nv-x.nv-axis > g').selectAll('g');
xTicks
.selectAll('text')
.attr('transform', function(d,i,j) { return 'translate (-10, 25) rotate(-90 0,0)' }) ;
etykiety wyglądać teraz tak:
Dla wielokrotnego wykresie, twój może dodać "'#' + containerId + 'svg" w d3.select jak poniżej:
//Rotate x-axis label
var xTicks = d3.select('#' + containerId + ' svg .nv-x.nv-axis > g').selectAll('g');
xTicks
.selectAll('text')
.attr('transform', function(d,i,j) { return 'translate (-15, 60) rotate(-90 0,0)' });
Anyways, Dzięki za @River odpowiedź.
Wystarczy napisać, że możesz (i powinieneś) zrobić to dla dowolnego innego rodzaju wykresów. Dobrym pomysłem jest określenie konkretnego kontenera D3, na którym pracujesz, szczególnie jeśli w grę wchodzi wiele wykresów. –
To zadziałało dla mnie. Głównym powodem, dla którego to robię, jest to, że zmiana kotwicy jest przyjemniejsza niż ręczne przetłumaczenie pozycji.
var xTicks = d3.select('.nv-x.nv-axis > g > g',_this.context.element).selectAll('g').selectAll('text');
xTicks.attr('transform', function() { return 'rotate(' + angle + ' 0,0)' }) ;
xTicks.attr('text-anchor',function() {
var anchor;
if(angle > 0){ anchor = 'start'; }
else if(angle < 0){ anchor = 'end'; }
else { anchor = 'middle'; }
return anchor;
});
Nieznaczna sugerowana zmiana '' 'xTicks.style ({'text-anchor': (function() {var anchor; ....})()});' '' – user25064
cokolwiek obrót tekst jest dać start/Middle/kończenia
d3.select('.nv-x.nv-axis > g > g').selectAll('g.tick text').style('text-anchor', 'start'); //start/middle/end
Następujące pracował dla mnie:
chart.axislist["xAxis"]["rotateLabels"]= -45
dzięki za to. Gdzie masz to zrobić? Mam kilka wykresów i jeśli zrobię to, co mówisz, działa tylko na pierwszym wykresie. Może są jakieś warunki wyścigowe i muszę tylko obracać etykietami, gdy jestem pewien, że wykresy zostały wykonane. Masz pomysł, jak to wiedzieć? – huyz
Musisz albo znaleźć sposób, aby wybrać wszystkie xTicks w tym samym czasie (zmieniając selektor ".nv-x.nv> g" na coś sensownego), ale to może być trudne. Prawdopodobnie musisz to zrobić dla każdego, wybierając po kolei ich xTicks. Upewnij się, że nadałeś każdemu wykresowi swoją własną klasę/identyfikator, dzięki czemu możesz łatwo je wybrać. – River
Dzięki temu zadziałało dla mnie –