c3 새 데이터를로드 할 때 JS 스크롤 막대 점프

d3 javascript charting library를 래퍼로 c3을 사용하고 있습니다. 데이터가 업데이트되면 스크롤 막대가 잠깐 깜박이고 심지어 in their own demo을 볼 수 있습니다.c3 새 데이터를로드 할 때 JS 스크롤 막대 점프

대소 문자 그대로 페이지에 스크롤 막대가 있으면 문제가되지 않습니다. 그러나 페이지가 작 으면 추가 및 갑작스러운 제거 또는 스크롤 막대가 들릴 수 있습니다.

우리는 그들의 예제에서와는 크게 다른 것을하지 않습니다. 스크롤바가 왜 움직이는 지 미스테리입니다. 어떤 아이디어?

데이터는 우리의 AngularJS와 지침에 전달지고 우리가 간단히 배열로 설정됩니다 정규화 된 데이터를 찍은 후 SignalR

$scope.$watch('data', function() { 
    normalizedData = normalize($scope.data); 

    chart.load({ 
     columns: getChartDataSet(normalizedData) 
    }); 
});

를 사용 : 당신이 내 코드를보고 싶은 경우는 타격 C3도`스타일 = "숨겨진 가시성"로, 그것은 <body> 요소의 하단에서 SVG를 추가 차트를 그릴 때

var chart = c3.generate({ 
    bindto: d3.select($element[0]), 
    data: { 
     type: 'donut', 
     columns: [], 
     colors: { 
      '1¢': '#2D9A28', 
      '5¢': '#00562D', 
      '10¢': '#0078C7', 
      '25¢': '#1D3967', 
      '$1': '#8536C8', 
      '$5': '#CA257E', 
      '$10': '#EC3500', 
      '$20': '#FF7D00', 
      '$50': '#FBBE00', 
      '$100': '#FFFC43' 
     } 
    }, 
    tooltip: { 
     show: true 
    }, 
    size: { 
     height: 200, 
     width: 200 
    }, 
    legend: { 
     show: true, 
     item: { 
      onmouseover: function (id) { 
       showArcTotal(id); 
      }, 
      onmouseout: function (id) { 
       hideArcTotal(); 
      } 
     } 
    }, 
    donut: { 
     width: 20, 
     title: $scope.label, 
     label: { 
      show: false, 
      format: function(value, ratio, id) { 
       return id; 
      } 
     } 
    } 
});

출처

2015-01-26 Jon Harding

나는 SVG 요소를 추측에는 요는 순간적으로 높이가 제로로 조정된다. 디버거를 사용하여 C3 코드를 단계별로 실행할 수 있는지 알아보고 그/때가 발생하면 볼 수 있습니까? – joews

옙, 나는 아무 쓸모가 없도록하려고 노력했다 .SVG는 결코 붕괴되지 않는다. –

의 맨 아래에 svg 요소가 추가되어있다. c3 라이브러리가 왜 추가하고 있는지 확실하지 않습니다. 종종 사람들은 다른 요소의 상대 크기를 계산하고 정확한 픽셀 크기를 사용하기 위해이를 수행합니다. – bwinchester

를 내지 C3 통과했다. 방금 CSS 클래스를 추가했습니다.

body > svg { height:0px !important }

저에게 문제가 해결되었습니다.

출처

2015-01-26 20:41:14

body> svg (높이 : 0; } 나를 도와주지 않았습니다. 그러나 나는 약간의 실험과 솔루션을 발견했다 : 윈도우의 높이가 너무 작은 경우

body > svg { 
    position: absolute; 
    z-index: -10; 
    top: 0; 
}

불행하게도,이 방법으로 문제가 해결되지 수 있습니다.

또한, 당신은 기본적으로 스크롤 막대를 추가하여 점프를 제거 할 수 있습니다

body { 
    overflow-y: scroll; 
}

출처

2015-02-08 23:50:54 Vladimir

필자는 스크롤 바가 필요하지 않을 때 거기에 스크롤바를 두는 것에 대해 큰 팬이 아닙니다. 불행히도 SVG의 사용자 정의 스타일이 필요한 것 같습니다. –

c3 새 데이터를로드 할 때 JS 스크롤 막대 점프

답변

관련 문제