search

Webiks / force-horse

force-horse: An angular.js wrapper for a d3.js force layout
http://webiks.com/blog/force-horse-demo/
16 stars 3 forks source link

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

Open eitanfr opened 6 years ago

eitanfr commented 6 years ago

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 commented 6 years ago

Reproduction:

ramtob commented 6 years ago

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

https://github.com/d3/d3-timer/issues/32

This could be the source of our issue too.

ramtob commented 6 years ago

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 commented 5 years ago

same here, did anyone find a solution?

eitanfr commented 5 years ago

I am doing debounce

sarbull commented 3 years ago

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 commented 2 years ago

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 commented 1 year ago

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