NVD3 라인 차트 X 축 눈금 내가 NVD3 여기에 라인 차트를 표시하기 위해 사용하고

Question

누락 3 옥토와 27-280 칸 (첫 번째와 마지막 진드기를 제외하고). 차트 폭을 늘리면 진드기가 나타나기 시작하기 때문에 자동 감소라는 것을 알고 있습니다. 그러나 나는이 이상한 행동을 줄이고, lineChart에는 multiBarChart와 같은 reduceXTicks 옵션이 없다는 것을 알게되었습니다.

나는 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; 
    }) 
}) 

하지만이 작동하지 않았다. 누구든지 이것을 제어하는 ​​방법을 알고 있습니까?

Answer 1

환원 동작은 작동 기본적으로 true로 showMaxMin 설정 때문이다. .showMaxMin(false) 수정에게 문제를 추가 : 경우

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

Answer 2

당신이 경계에 가까운 경계 진드기와 진드기를 모두 갖고 싶어 (MaxMin) 값, 소스를 수정할 수 있습니다. 난 그냥이 버퍼를 제거

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!! 
       } 
      }); 
} 

:

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)); 
}