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

Question

希望不大，但我认为没有人知道如何修复 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，无法及时解决这个问题。

提前致谢!

Answer 1

我认为问题与过渡的使用有关。有四个地方使用从 .transition() 返回的选择调用 chart 函数，但似乎不起作用。

四个更改中的三个更改位于 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() 的情况。