D3 - za pomocą ciągów znaków dla znaczników osi

Chcę utworzyć wykres słupkowy za pomocą ciągów znaków jako etykiety dla znaczników na osi X (np. Rok 1, Rok 2 itd. Zamiast 0,1,2 itd.) .D3 - za pomocą ciągów znaków dla znaczników osi

I rozpoczęto za pomocą wartości liczbowych na osi x (na przykład 0,1,2,3, etc.), jak następuje:

1) generowania swoje zakresach

 x = d3.scale.ordinal() 
     .domain(d3.range(svg.chartData[0].length)) //number of columns is a spreadsheet-like system 
     .rangeRoundBands([0,width], .1); 


    y = d3.scale.linear() 
     .domain(Math.min(d3.min(svg.chartData.extent),0), Math.max(d3.min(svg.chartData.extent),0)]) 
     .range([height, 0]) 
     .nice();

2) Złóż osie:

 d3.svg.axis() 
     .scale(x);

3) Przerysuj osie:

 svg.select(".axis.x_axis") 
     .call(make_x_axis().orient("bottom").tickSubdivide(1).tickSize(6, 3, 0));

Działa to dobrze z domyślnymi etykietami osi numerycznych.

Jeśli próbuję użyć tablicę ciągów dla X tickValues jak to ....

 d3.svg.axis() 
     .scale(x).tickValues(svg.pointsNames); //svg.pointsNames = ["Year 1", "year 2", etc.]

... kiedy przerysować wykres (z lub bez zmian w danych/ustawień) etykiety zamieniają się w ten sposób.

enter image description here

Wskazówki jak Kol 1 zajmuje miejsce Kol 0 i vice versa.

Czy wiesz, dlaczego tak się dzieje?

Źródło

2012-08-02 Gian

Aktualizacja

Wystarczy posortować svg.pointsNames przed zastosowaniem ich jako tickValues. Upewnij się, że sortujesz je dokładnie w ten sam sposób, w jaki sortujesz dane. W ten sposób mapowanie jeden-jeden jest zawsze utrzymywane pomiędzy etykietami i wartościami znaczników.

Również jeśli mogę, sprawdź tutaj tickFormat` function. To wydaje mi się lepszą opcją.

//Tick format example 
chart,xAxis.tickFormat(function(d, i){ 
    return "Year" + d //"Year1 Year2, etc depending on the tick value - 0,1,2,3,4" 
})

Źródło

2012-08-02 06:50:37

Dzięki Jibi, pointsNames są sortowane tak, jak są generowane razem z danymi numerycznymi: kiedy zapełniam kolumnę do wykresu, wypycham nazwę w tablicy nazw. Sprawdziłem również w konsoli, czy pointsNames jest zawsze we właściwej kolejności. Dziwne jest to, że zaczyna się dobrze przy pierwszym zainicjowaniu wykresu, a następnie zamienia się i pozostanie zamieniony po tym. Zamienia się więc tylko przy pierwszym odrysowaniu. Dzięki za link: w jaki sposób mam użyć osi.tickFormat ([format]) w moim przypadku? Dzięki jeszcze raz. – Gian

Zgadzam się z @Jibi, funkcja tickFormat to bardziej czysty sposób rozwiązania problemu. –

@Pablo, czy mógłbyś mi pokazać, jak używać go w moim przypadku w osi ax.tickFormat ([format])? Jak mogę sformułować [0, 1, 2, itd.], Który działa jako łańcuchy pochodzące z innej tablicy? – Gian

Dzięki za to ... Użyłem tej funkcji z wbudowanym klauzulą if, aby obsłużyć inną serię osi X z nazwami zamiast liczb.

Frakcje Array składa się z wszystkich istotnych nazw posortowanych według indeksów serii, które następnie zostają dopasowane do odpowiadającego im indeksu w danych.

xAxis = d3.svg.axis().scale(xScale) 
      .tickFormat(function(d) { 

       if(seriesX == 'seriesValue'){ 
        return factions[d]} 

       else{ 
        return d} 
      })  
     .orient("bottom");

Źródło

2014-08-18 11:12:01 stinglsa

D3 - za pomocą ciągów znaków dla znaczników osi

Odpowiedz

Powiązane problemy