nvd3.js-Line Grafik:

Question

üzerinde fare eksenlerini döndürmek ve çizgi değerleri göstermek Bu tür bir forum için yeniyim ve İngilizce becerilerim en iyisi değil ama elimden gelenin en iyisini yapmaya çalışacağım:).

nvd3 website adresinde View Finder ile bir Çizgi Grafik örneği vardır. Bu, son 2 gün içinde çalıştığım (example \ lineWithFocusChart.html, nvd3 zip paketi) paketidir. Örnek biçiminde yalnızca bir değişiklik yaptım: X eksenindeki tarihleri ​​normal sayılar yerine kullanıyorum. İşte

benim 2 soru vardır:

1- Nasıl x ekseni tüm Keneler etiketleri döndürebilir? Tarihlerim çok uzun (% x% X, gün ve saat) ve görüntüleme özelliklerini iyileştirmek için oder içinde döndürmelerini istiyorum. Sadece 2 kene döndürülebilir (max ve min, x ekseninin kenarları). Bu içimde değiştirmek kodu "anahtarı (axis.orient())" nv.d3.js de blok: i .attr yerleştirdik kontrol gibi

case 'bottom': 
     axisLabel.enter().append('text').attr('class', 'axislabel') 
      .attr('text-anchor', 'middle') 
      .attr('y', 25); 
     axisLabel 
      .attr('x', scale.range()[1]/2); 
     if (showMaxMin) { 
     var axisMaxMin = wrap.selectAll('g.axisMaxMin') 
         .data(scale.domain()); 
     axisMaxMin.enter().append('g').attr('class', 'axisMaxMin').append('text'); 
     axisMaxMin.exit().remove(); 
     axisMaxMin 
      .attr('transform', function(d,i) { 
       return 'translate(' + scale(d) + ',0)' 
      }) 
      .select('text') 

      .attr('dy', '.71em') 
      .attr('y', axis.tickPadding()) 
      .attr('text-anchor', 'middle') 
      .text(function(d,i) { 
       return ('' + axis.tickFormat()(d)).match('NaN') ? '' : axis.tickFormat()(d) 
      }) 
      .attr('transform', 'rotate(45)') 
      ; 
     d3.transition(axisMaxMin) 
      .attr('transform', function(d,i) { 
       return 'translate(' + scale.range()[i] + ',0)' 
      }); 
     } 
     break; 

(', 'dönüşümü' döndürün (45) ') yeni öznitelik olarak maks ve min keneler döndürülür (axisMaxMin). Bu şekilde (nv.d3.js dosyası boyunca) x ticks ile ilişkili olduğunu düşündüğüm diğer metin öğeleriyle denedim ama işe yaramıyor. Herhangi bir fikir? Tüm X etiketlerinin döndürülmesi için dönüşümü nereye koymalıyım?

2- Örnekte, fareyi satırın üzerine getirdiğinizde, noktayla ilişkili değeri (x, y) göstermek için hiçbir olay tetiklenmez. Bu değerleri nasıl gösterebilirim? Bu değerlerin gösterildiği diğer örneklerde kullanılan yöntemleri kopyalayıp yapıştırmaya çalıştım ama çalışmaz. Herhangi bir fikir?

Zaman ve bilginizi paylaştığınız için teşekkür ederiz: D.

Answer 1

x-axis onay etiketlerini döndürmeyi gerçekten kolaylaştıran nvd3 için son bir güncelleştirme yapıldı. Artık bir tamsayı alan ve xTick etiketlerinizi belirtilen sayıda derece döndürecek olan rotateLabels (derece) adlı eksen modelinin bir işlevi vardır. Böyle kullanabilirsin, tüm XTick geri 45 derece etiketler döndürmek için:

var chart = nv.models.lineChart(); 
chart.xAxis.rotateLabels(-45);