javascript - NVD3 arcTween 函数抛出未定义的错误

Question

我正在使用 NVD3 1.8.1 和 D3 3.5.6。

我有一个奇怪的问题，由于某种原因(大约 5-10% 的时间)我的图表无法加载。

nv.d3.js 中的 arcTween 函数(对于饼图)抛出的错误是“Uncaught TypeError: object is not a function”:

function arcTween(a, idx) {
            a.endAngle = isNaN(a.endAngle) ? 0 : a.endAngle;
            a.startAngle = isNaN(a.startAngle) ? 0 : a.startAngle;
            if (!donut) a.innerRadius = 0;
            var i = d3.interpolate(this._current, a);
            this._current = i(0);
            return function (t) {
                return arcs[idx](i(t));
            };
        }

调试时，我可以看到值到处都是，即 idx 似乎是对整个 nvd3 库的引用，而不是整数! 'i' 是一个数字而不是函数，this._current 未定义等。

如果我刷新页面，平均有 5-10% 的时间会崩溃。除此之外，一切都正常并且符合预期。

我创建了一个codepen here ，但不幸的是无法在那里复制问题...我可能应该提到这全部包含在 Angular 指令中，并由 Angular 在创建指令时传入的“元素”生成。

鉴于我只能间歇性地在代码中重新创建它，我知道我的代码一定出了问题，但我无法弄清楚，所以作为最后的手段，我认为我会在这里发布问题。

有人以前见过这个问题吗？有什么建议来解决这个问题吗？我正在考虑检查图表是否已正确生成，否则尝试再次渲染它，但找不到根本原因很烦人。

如果有任何建议，我将不胜感激，

山姆

编辑:

此外，图表部分生成，只是每个“切片”缺少“路径”:

<svg class="_pie1 nvd3-svg"><g class="nvd3 nv-wrap nv-pieChart" transform="translate(20,30)"><g><g class="nv-pieWrap nvd3-svg"><g class="nvd3 nv-wrap nv-pie nv-chart-2110" transform="translate(0,0)"><g><g class="nv-pie" transform="translate(177.5,172.5)"><g class="nv-slice" fill="#00385D" stroke="#00385D"><path></path></g><g class="nv-slice" fill="transparent" stroke="transparent"><path></path></g></g><g class="nv-pieLabels" transform="translate(177.5,172.5)"></g></g></g></g><g class="nv-legendWrap"></g></g></g><text x="195" y="180" dy="-.7em" class="nv-title" style="text-anchor: middle;">Total income*</text><text x="195" y="210" dy="-.7em" class="nv-titleValue" style="text-anchor: middle;">£4,543</text><line x1="130" y1="205" x2="265" y2="205" stroke-width="0.1" stroke="#333333"></line><text x="195" y="245" dy="-.7em" class="nv-title" style="text-anchor: middle;">Total outgoings</text><text x="195" y="275" dy="-.7em" class="nv-titleValue" style="text-anchor: middle;">£46,574</text></svg>

再次编辑:如果我删除 50 毫秒超时(请参阅 codepen)，我每次都会收到错误，因此这里存在一些计时问题。

Answer 1

好吧，我明白了。基本上，我们创建值为 1 的饼图，然后将其更改为实际值，这样我们就可以获得一个很好的 nvd3 过渡(因为如果图形加载实际值，则 nvd3 不会动画，只有当您更改它们时)。

我们有一个 50 毫秒的超时，旨在等待页面明显加载(我们有动画淡入淡出)，因此饼图动画在页面加载时对用户可见，但这实际上掩盖了设置图表值快速连续两次(到 1，然后到实际值)，这导致了问题。显然，图表偶尔需要超过 50 毫秒的时间来渲染，因此我们遇到了间歇性错误。