Biểu đồ nvd3.js-Line với Trình xem tìm kiếm: nhãn xoay và hiển thị giá trị dòng khi di chuột qua

Question

Tôi mới tham gia loại diễn đàn này và các kỹ năng tiếng Anh của tôi không tốt nhất nhưng tôi sẽ cố gắng hết sức:).

Có ví dụ về Biểu đồ đường có Trình tìm kiếm xem tại nvd3 website. Đây là gói (ví dụ \ lineWithFocusChart.html, gói zip nvd3) mà tôi đã làm việc trong 2 ngày qua. Tôi đã thực hiện chỉ một thay đổi đối với định dạng của ví dụ: Tôi sử dụng ngày trong trục X thay vì số bình thường.

Dưới đây là 2 câu hỏi của tôi:

1- Làm thế nào tôi có thể xoay nhãn tất cả các ve trong trục x? Ngày của tôi quá dài (% x% X, ngày và giờ) và tôi muốn họ xoay vòng để cải thiện khả năng xem của họ. Tôi chỉ có thể nhận được 2 ve quay (tối đa và min, các cạnh, của trục x). Đây là mã tôi sửa đổi bên trong "switch (axis.orient())" khối tại nv.d3.js:

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; 

Như bạn có thể kiểm tra tôi đã đặt .attr ('biến', 'xoay (45) ') như thuộc tính mới để các dấu tối đa và tối được xoay (axisMaxMin). Tôi đã thử cách này (trong suốt tập tin nv.d3.js) với các yếu tố văn bản khác mà tôi nghĩ là có liên quan đến x bọ ve nhưng nó không hoạt động. Bất kỳ ý tưởng? Tôi phải đặt phép biến đổi ở đâu để hiển thị tất cả các nhãn X được xoay?

2- Trong ví dụ, khi bạn đặt chuột lên trên đường, không có sự kiện nào được kích hoạt để hiển thị giá trị (x, y) được liên kết với điểm đó. Làm cách nào tôi có thể hiển thị các giá trị đó? Tôi đã cố gắng sao chép-dán các phương pháp được sử dụng trong các ví dụ khác, nơi các giá trị này được hiển thị nhưng nó không hoạt động. Bất kỳ ý tưởng?

Cảm ơn bạn đã chia sẻ thời gian và kiến ​​thức của mình: D.

Answer 1

Đã có bản cập nhật gần đây đối với nvd3 giúp việc xoay nhãn dấu x trục thật dễ dàng. Hiện nay có một chức năng của mô hình trục được gọi là rotateLabels (độ) lấy một số nguyên và sẽ xoay các nhãn xTick của bạn với số độ được chỉ định. Để xoay tất cả xTick nhãn 45 độ trở lại, bạn có thể sử dụng nó như thế này:

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