Powiedzmy, że mam wykres, w którym etykiety kleszczy osi X są bardzo długie ciągi, a więc chcę Alternuj wyściółkę kleszczową (odległość pionowa między tekstem a osią X), dzięki czemu etykiety kleszczy nie pokrywają się.

Wiem, że można go osiągnąć po renderowaniu, wybierając elementy kleszcza i stosując atrybut transformacji. Ale chciałbym zrobić:

var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom")
.tickSize(0)
.tickPadding(function(i) {
  // some logic here to determine the alternating-height strategy by index, e.g.
  return i % 2 ? 20 : 30;
 });

Nie działa w D3 AS-is - dokumentacji (HTTPS: //Github.com/mbostock/d3/Wiki/svg-axes#Wiki-tickpadding) mówi, że Tickpadding po prostu bierze liczbę pikseli. Czy jest lepszy sposób na to? Monkey Patch D3 AXIS.Tickpadding Funkcja, aby wykonać funkcję lub numer, a następnie zastosować funkcję podczas rysowania kleszczy?

1
user941238 20 listopad 2013, 02:02

3 odpowiedzi

Najlepsza odpowiedź

Dla poprawki kodu źródłowego, zobacz:

https://github.com/adonmay/d3/commit/BFDB36FA1780666775C6804B86EB10BEA3B3393.

Alternatywna poprawka jest ręcznie zawijaniem tekstu po renderowaniu:

https://github.com/mbostock/d3/issues/1641.

http://bl.ocks.org/mbostock/7555321.

1
user941238 20 listopad 2013, 00:59

Miałem też nadzieję zrobić to. Używałem numerów tygodniowych i ma trochę ciasny. Zasadniczo wyglądała oś x

111213141516171819 

I miałem nadzieję, że ich stosowałem. Skończyło się to

$('.tick text').each(function(i){
   var yval = this.getAttribute("y");
   if( i % 2 == 0 )this.setAttribute("y",parseInt(yval)+10);
});

Po narysowaniu wykresu. Upewniłem się, że weźmiełem również dodatkowy margines (10) na dole. Wynik był

  12  14  16  18
11  13  15  17  19
1
Travis J 27 styczeń 2014, 21:20

Jedynym wyborem, który masz, ma zmodyfikować źródło. D3 zakłada się w trakcie wdrażania osi, że tickPadding jest liczbą, a nie funkcją - patrz Źródło.

0
Lars Kotthoff 19 listopad 2013, 22:18