c3加載新數據時JS滾動條跳轉

我們使用c3作爲d3 javascript圖表庫的包裝。數據更新時甚至可以看到in their own demo，滾動條瞬間閃爍。c3加載新數據時JS滾動條跳轉

當頁面上已經有一個滾動條時，這不是問題，因爲它們是在他們的情況下。但是，如果頁面較小，添加和突然刪除或滾動條可能會震動。

我們沒有做任何與他們的例子截然不同的事情。神祕的是滾動條跳躍的原因。有任何想法嗎？如果你想看看我的代碼是一擊：使用SignalR

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

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

我們把它簡單地被設置到一個數組，然後歸一化數據後

數據獲取傳遞給我們的AngularJS指令傳遞至C3

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 2015-01-26 19:51:36

是的，我一直在嘗試，無濟於事，svg從不崩潰或任何 – 2015-01-26 19:59:24

有一個svg元素追加到的底部。不知道爲什麼c3庫正在追加它。通常，人們會這樣計算其他元素的相對大小並使用精確的像素大小。 – bwinchester 2015-01-26 20:06:11

當C3繪製其追加在<body>元件的底部上的SVG圖表，即使`風格=「能見度：隱藏」。我剛剛添加了一個CSS類

body > svg { height:0px !important }

這就解決了我的問題。

來源

2015-01-26 20:41:14

body> svg {height：0; }沒有幫助我。但我已經嘗試了一下，發現了一個解決方案：

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

不幸的是，如果窗口的高度太小，此方法無法解決問題。

此外，您還可以通過默認添加滾動擺脫跳躍：

body { 
    overflow-y: scroll; 
}

來源

2015-02-08 23:50:54 Vladimir

如果沒有必要，我不會將滾動條放在那裏。不幸的是，SVG上的自定義樣式似乎是需要的 – 2015-02-09 19:24:07

c3加載新數據時JS滾動條跳轉

回答

相關問題