javascript – 带有图例和工具提示的D3v 3.5.13的简单D3折线图中的错误

2023年1月23日 199次阅读

这是一个很长的镜头,但我不认为有人会知道如何修复Chrome中的错误：

Uncaught TypeError: Cannot read property ‘1’ of undefined.

对于this stunning visualization.我已将错误缩小到第7486行(当取消代码并在Sublime Text 2中打开时).在FireFox中,错误是：

TypeError: e[a] is undefined

.

Il.transition = function() {
        for (var n, t, e, r, u = this.id, i = ++Yl, a = this.namespace, o = [], l = 0, c = this.length; c > l; l++) {
            o.push(n = []);
            for (var t = this[l], s = 0, f = t.length; f > s; s++)(e = t[s]) && (r = e[a][u], Qi(e, s, a, i, {
                time: r.time,
                ease: r.ease,
                delay: r.delay + r.duration,
                duration: r.duration
            })), n.push(e)
        }
        return Wi(o, a, i)

我很乐意在我的项目中使用它,但是当它悬停在顶级图例项目(Cosine2 Wave等)上时会产生上述错误.

它目前正在使用D3v2.??.使用此版本后,可视化工作完美无瑕,但在较新版本的D3上开始出错.

任何帮助都会很棒,我一直试图解决它无济于事,坦率地说,我在D3或JavaScript方面并不擅长能够及时解决这个问题.

非常感谢提前！

最佳答案 我认为这个问题与过渡的使用有关.调用图表函数有四个地方,其中的选择是从.transition()返回的,并且看起来不起作用.

四个变化中的三个在d3linewithlegend.js的第63,69和74行中.这三行中的每一行如下：

        selection.transition().call(chart)

用.替换每一行

        selection.call(chart).transition()

最后,在index.html文件中,替换

  svg.transition().duration(500)
      .attr('width', width(margin))
      .attr('height', height(margin))
      .call(chart);

同

  svg.call(chart).transition().duration(500)
      .attr('width', width(margin))
      .attr('height', height(margin))

进行此更改后,将鼠标悬停在图例上,适用于Chrome,Firefox和Edge.

转换在D3 3.0版本中进行了大修,因此涉及它们的D3 v2代码在D3 v3中不起作用也许并不奇怪.我不能说我理解他们确切地知道问题所在,但我确实观察到如果在控制台中输入以下行

d3.select("body").transition().transition()

然后D3会抛出我尝试查看您链接到的可视化时遇到的相同异常.这使我避免了在调用transition()返回的选择上调用transition()的情况.

点赞