Question

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

未捕获的TypeError：无法读取属性＆＃39; 1＆＃39;未定义的。

代表this stunning visualization。我已将错误缩小到第7486行（当取消代码并在Sublime Text 2中打开时）。在FireFox中，错误是：

TypeError：e [a]未定义

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方面并不擅长能够及时解决这个问题。

提前非常感谢！

Answer 1

我认为问题与过渡的使用有关。调用chart函数有四个位置，其中的选择已从.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()的情况。

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

1 个答案: