nvd3.js의 multibarchart에서 레이블 텍스트 편집

nvd3.js의 multibarchart에 다음 JSON 형식 입력이 필요하다는 것을 발견했습니다.nvd3.js의 multibarchart에서 레이블 텍스트 편집

[ 
    { 
    "key": "abcd", 
    "values": [ 
     { 
     "x": 1221578789000, 
     "y": 40 
     }, 
     { 
     "x": 1222578789000, 
     "y": 103 
     }, 
     { 
     "x":1224181799000, 
     "y": 35 
     } 
    ] 
    } 
]

하지만 x 라벨에 DateTimestamp를 사용하고 싶습니다. 'x'는 int/long 데이터 유형 중 하나 여야합니다.

그런데, 나는 긴 데이터 형식을 nvd3.js 코드 안에 날짜 시간 소인으로 변환하려고했습니다. 그 변화와

nv.models.axis = function() {  
    {code block} 
    switch (axis.orient()) { 
    case 'bottom': 
     {code block} 
     if (showMaxMin) { 
     //if (showMaxMin && !isOrdinal) { 
     var axisMaxMin = wrap.selectAll('g.nv-axisMaxMin') 
      //.data(scale.domain()) 
      .data([scale.domain()[0], scale.domain()[scale.domain().length - 1]]); 
     axisMaxMin.enter().append('g').attr('class', 'nv-axisMaxMin').append('text'); 
     axisMaxMin.exit().remove(); 
     axisMaxMin.attr('transform', function(d,i) { 
      return 'translate(' + (scale(d) + 
        (isOrdinal ? scale.rangeBand()/2 : 0)) + ',0)' 
      }) 
      .select('text') 
      .attr('dy', '.71em') 
      .attr('y', axis.tickPadding()) 
      .attr('transform', function(d,i,j) { 
      return 'rotate('+ rotateLabels + ' 40,60)' 
      }) 
      .attr('text-anchor', rotateLabels ? (rotateLabels%360 > 0 ? 
               'start' : 'end') : 'middle') 
      .text(function(d,i) { 
      **var dat = new Date(d);**     
      **return dat.toUTCString();** 
      //return v; 
      }); 

      d3.transition(axisMaxMin) 
      .attr('transform', function(d,i) { 
       //return 'translate(' + scale.range()[i] + ',0)' 
       //return 'translate(' + scale(d) + ',0)' 
       return 'translate(' + (scale(d) + (isOrdinal ? 
           scale.rangeBand()/2 : 0)) + ',0)' 
      }); 
     } 
    } 
}

, 나는 날짜 시간 스탬프에 MaxMin 'X 레이블을'변환 할 수 있어요. 그러나 나는 틱 레이블 ('최소 x'와 '최대 x'축 사이의 레이블은 긴 값 자체를 표시)에 대해 동일한 변환을 수행 할 위치를 찾을 수 없습니다.

출처

2012-12-18 Krishna

크리슈 나는 코드 형식을 개선하기 위해 게시물을 편집했습니다. 그것은 끔찍했다. 귀하의 이익을 위해 코드 서식 습관을 향상시켜야합니다. – VividD

차트 개체에서 필요한 변경을하면 문제가 해결됩니다.

var chart = nv.models.multiBarChart(); 

chart.xAxis 
    .showMaxMin(true) 
    .rotateLabels(440) 
    .tickFormat(function(d) { 
        return d3.time.format('%x')(new Date(d)) 
        });

출처

2012-12-19 06:23:23 Krishna

nvd3.js의 multibarchart에서 레이블 텍스트 편집

답변

관련 문제