Question

我正在使用NVD3 1.8.1和D3 3.5.6。

我有一个奇怪的问题，由于某些原因（大约5-10％的时间）我的图表没有加载。

错误是“未捕获的TypeError：对象不是函数”由nv.d3.js中的arcTween函数（对于饼图）抛出：

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，但不幸的是不能复制那里的问题......我应该提到这一点都包含在一个角度指令中，并且在创建角度时传入的'element'生成指令。

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

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

我很感激任何建议，

萨姆

编辑：

此外，图表部分生成，每个'切片'只缺少'路径'：

<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>

再次编辑：如果我删除50ms超时（请参阅codepen），我每次都会收到错误，因此这里有一些时间问题。

Answer 1

好的我明白了。基本上我们创建了值为1的饼图，然后将其更改为实际值，因此我们可以获得一个不错的nvd3转换（因为如果图形加载实际值，nvd3不会生成动画，它只是＃s;当你改变它们时）。

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

Answer 2

return arcs[idx](i(t));

这看起来像是一个意外的函数调用，可能会导致您的错误？

如果你想在那里做一些乘法，那么我建议明确使用星号（*）。

e.g。

return arcs[idx] * (i(t));

NVD3 arcTween func抛出未定义的错误

2 个答案: