[Exception] Uncaught DOMException: Failed to read the 'value' property from 'SVGLength'

[eitanfr]

hi,
getting this exception after passing data to force-horse, I am passing data a number of times in a second - I guess it causes the issue:

the exception:

Uncaught DOMException: Failed to read the 'value' property from 'SVGLength': Could not resolve relative length.
    at SVGSVGElement.defaultExtent (http://localhost:3000/webpack-internal:///2894:29:25)
    at new Gesture (http://localhost:3000/webpack-internal:///2894:198:26)
    at gesture (http://localhost:3000/webpack-internal:///2894:190:12)
    at SVGSVGElement.eval (http://localhost:3000/webpack-internal:///2894:164:40)

[AmitMY]

Reproduction:

• Go to: http://webiks.com/blog/force-horse-demo/
• Random graph, 1000 nodes.
• Spam "create"

[ramtob]

There is an similar issue open on d3-timer (same error message)

d3/d3-timer#32

This could be the source of our issue too.

[ramtob]

Above a certain number of nodes (default = 420), Force horse operates a requestAnimationFrame() call of its own. I thought the problem could be related to this. But I see that the problem happens also for e.g. 200 nodes. So the root problem still seems to be inside d3.js.

[LiorSaadon]

same here, did anyone find a solution?

[eitanfr]

I am doing debounce

[sarbull]

adding .extent([0, 0], [300, 300]); fixed my issue.

this.zoom =
  d3.zoom()
      .extent([[0,0],[300,300]])
      .on('zoom', this.zooming);

i don't know why it's working 🥇

[wjentner]

I stumbled over this when searching for the error message, and it provided the correct hint.

The Readme for zoom.extent states:
"If extent is not specified, returns the current extent accessor, which defaults to [[0, 0], [width, height]] where width is the client width of the element and height is its client height; for SVG elements, the nearest ancestor SVG element’s viewBox, or width and height attributes, are used. Alternatively, consider using element.getBoundingClientRect."

see: https://github.com/d3/d3-zoom/blob/main/README.md#zoom_extent

For me, the error was shown because the SVG was loaded in a different tab and this possibly causes the width/height to be 0.

[jackytv12]

adding .extent([0, 0], [300, 300]); fixed my issue.

this.zoom =
  d3.zoom()
      .extent([[0,0],[300,300]])
      .on('zoom', this.zooming);

i don't know why it's working 🥇

saved my life