c3 JS加载新数据时滚动条跳跃答案

【问题标题】：c3 JS scroll bar jumping when loading new datac3 JS加载新数据时滚动条跳跃
【发布时间】：2015-03-25 07:09:48
【问题描述】：

我们使用 c3 作为 d3 javascript 图表库的包装器。您甚至可以看到in their own demo 更新数据时滚动条会瞬间闪烁。

当页面上已经有滚动条时，这不是问题，就像他们的情况一样。但如果页面较小，添加和突然删除或滚动条可能会很刺耳。

我们所做的与他们在示例中所做的没有太大的不同。谜团是滚动条跳跃的原因。有任何想法吗？如果你想看我的代码，那就太棒了：

数据正在使用 SignalR 传递给我们的 AngularJS 指令

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

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

在我们获取标准化数据后，它只是被设置到一个数组中，然后传递给 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;
            }
        }
    }
});

【问题讨论】：

我猜 SVG 元素会暂时调整为高度为零。您能否使用调试器单步执行 C3 代码并查看是否/何时发生这种情况？
是的，我一直在尝试无济于事，svg 永远不会崩溃或任何东西
底部有一个 svg 元素。不知道为什么 c3 库要附加它。通常，人们这样做是为了计算其他元素的相对大小并使用精确的像素大小。

标签： javascript css angularjs d3.js c3

【解决方案1】：

body > svg { 高度：0; } 没有帮助我。但我尝试了一下，找到了解决办法：

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

很遗憾，如果窗口的高度太小，此方法无法解决问题。

另外，你可以通过默认添加滚动条来摆脱跳跃：

body {
    overflow-y: scroll;
}

【讨论】：

我不太喜欢在不需要时将滚动条放在那里。不幸的是，SVG 上的自定义样式似乎是需要的

【解决方案2】：

当 C3 绘制图表时，它会在 <body> 元素的底部附加一个 SVG，即使使用 `style="visibility:hidden" 也是如此。我刚刚添加了一个 CSS 类

body > svg { height:0px !important }

这解决了我的问题。

【讨论】：