NVD3 Dòng Chart X Axis Bọ ve đang thiếu

Question

Tôi đang sử dụng NVD3 để hiển thị biểu đồ đường thẳng ở đây: http://jsbin.com/xodaxafiti/2/edit?js,output

Nhưng nó có vẻ như NVD3 tự động ẩn một số tickLabels trên Xaxis, nhưng chỉ những ve gần cạnh, tức là 2- 3Oct và 27-28Oct (ngoại trừ dấu đầu tiên và cuối cùng). Tôi biết rằng đây là tự động giảm vì khi tôi tăng chiều rộng của biểu đồ, các dấu tích bắt đầu xuất hiện. Tuy nhiên tôi thấy rằng hành vi này giảm lạ, và lineChart không có tùy chọn reduceXTicks như multiBarChart.

Tôi muốn để có thể kiểm soát hành vi giảm bản thân mình như this:

var chart = nv.models.lineChart()  
    .useInteractiveGuideline(true) 
    .margin({left: 80,top: 20,bottom: 120,right: 20}); 

chart.xAxis.ticks(function() { 
    return data[0].map(chart.x()).filter(function(d,i) { 
     i % Math.ceil(data[0].values.length/(availableWidth/100)) === 0; 
    }) 
}) 

Nhưng nó đã không làm việc. Bất cứ ai có bất kỳ ý tưởng làm thế nào để kiểm soát này?

Answer 1

Các hành vi giảm việc vì showMaxMin set là true theo mặc định. Thêm .showMaxMin(false) sửa chữa các vấn đề:

chart.xAxis.axisLabel("XAxisLabel") 
    .showMaxMin(false)  
    .tickValues(tickvalues)   
    .tickFormat(function (d) { 
     return tickformat[d]; 
     }) 
; 

Answer 2

Trong trường hợp bạn muốn có cả các dấu ranh giới và ve gần ranh giới (MaxMin) giá trị, bạn có thể sửa đổi mã nguồn.

Trong nv.models.axis(), có một bộ đệm đưa ra khi showMaxMin là đúng đối với đáy/đỉnh hướng:

if (showMaxMin && (axis.orient() === 'top' || axis.orient() === 'bottom')) { 
      var maxMinRange = []; 
      wrap.selectAll('g.nv-axisMaxMin') 
       .each(function(d,i) { 
        try { 
         if (i) // i== 1, max position 
          maxMinRange.push(scale(d) - this.getBoundingClientRect().width - 4); //assuming the max and min labels are as wide as the next tick (with an extra 4 pixels just in case) 
         else // i==0, min position 
          maxMinRange.push(scale(d) + this.getBoundingClientRect().width + 4) 
        }catch (err) { 
         if (i) // i== 1, max position 
          maxMinRange.push(scale(d) - 4); //assuming the max and min labels are as wide as the next tick (with an extra 4 pixels just in case) 
         else // i==0, min position 
          maxMinRange.push(scale(d) + 4); 
        } 
       }); 
      // the g's wrapping each tick 
      g.selectAll('g').each(function(d, i) { 
       if (scale(d) < maxMinRange[0] || scale(d) > maxMinRange[1]) { 
        if (d > 1e-10 || d < -1e-10) // accounts for minor floating point errors... though could be problematic if the scale is EXTREMELY SMALL 
         d3.select(this).remove(); 
        else 
         d3.select(this).select('text').remove(); // Don't remove the ZERO line!! 
       } 
      }); 
} 

Tôi chỉ cần loại bỏ các bộ đệm:

try { 
     if (i) // i== 1, max position 
      maxMinRange.push(scale(d)); 
     else // i==0, min position 
      maxMinRange.push(scale(d)) 
}catch (err) { 
     if (i) // i== 1, max position 
       maxMinRange.push(scale(d)); 
     else // i==0, min position 
       maxMinRange.push(scale(d)); 
}