>

여기에 NVD3을 사용하여 꺾은 선형 차트를 표시하고 있습니다. http://jsbin.com/ xodaxafiti/2/edit? js, 출력

그러나 NVD3은 XAxis에서 일부 tickLabels를 자동 숨기기처럼 보이지만 가장자리 근처의 틱 (예 : 2-3Oct 및 27-28Oct) (첫 번째 및 마지막 틱 제외)입니다. 차트 너비를 늘리면 눈금이 표시되기 때문에 이것이 자동 축소라는 것을 알고 있습니다. 그러나이 감소 동작이 이상하다는 것을 알았으며 lineChart에는 multiBarChart와 같은 reduceXTicks 옵션이 없습니다.

이 와 같은 축소 동작을 직접 제어하고 싶습니다.

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

그러나 작동하지 않았습니다. 이것을 제어하는 ​​방법을 아는 사람이 있습니까?

  • 답변 # 1

    showMaxMin 때문에 감소 동작이 작동합니다  기본적으로 true로 설정됩니다. .showMaxMin(false) 추가  문제를 해결합니다 :

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

  • 답변 # 2

    두 경계를 모두 원할 경우 틱 및 틱이 경계 (MaxMin) 값에 근접하면 소스를 수정할 수 있습니다.

    nv.models.axis ()에는 showMaxMin이 아래/위 방향에 대해 true 일 때 제공되는 버퍼가 있습니다 :

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

  • 이전 c# - 버전 번호에 대한 정규식
  • 다음 갤러리 폴더에서 SD 카드 대체 폴더로 Android 복사 이미지