A bug in a simple D3 lineup with a legend and tooltips for D3v 3.5.13

Question

This is a long snapshot, but I don't think anyone knows how to fix a bug in Chrome:

Uncaught TypeError: Unable to read property '1' from undefined.

for this amazing visualization . I narrowed the error to line 7486 (when unifying code and opening in Sublime Text 2). In Firefox, the error is:

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)

I would like to use it in my project, but it generates the above error when hovering over the upper elements of the legend (Cosine2 Wave, etc.).

Currently using D3v2. ?? . After using this version, the visualization works flawlessly, but begins to fail in new versions of D3.

, , , , D3 JavaScript , .

!

Answer 1

, . , chart , .transition(), .

63, 69 74 d3linewithlegend.js. :

        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().