Situation: I am using Vue JS and am dynamically rendering an SVG contained inside a modal. After rendering the SVG, I call the D3SeatingChart.attach function to attach my new SVG.
Issue: Since this SVG was contained inside a modal, it was hidden by a parent element with a display: none; attribute. Because of this, the clientWidth and clientHeight properties of my SVG return 0. Since attach also results in zoom being called, this was causing some issues. If clientWidth and clientHeight return 0, this results in the zoom function attempting to perform the following transformation:
translate(NaN,NaN)scale(-Infinity)
In chrome, this results in a console error log and is not a huge deal. However, in Firefox this will actually throw back an exception, resulting in the SVG never being properly attached.
I fixed this issue by waiting to attach my SVG until the user opens the modal. However, this issue could be prevented by returning early from the zoom function if either parentWidth or parentHeight are falsey.
Situation: I am using Vue JS and am dynamically rendering an SVG contained inside a modal. After rendering the SVG, I call the
D3SeatingChart.attachfunction to attach my new SVG.Issue: Since this SVG was contained inside a modal, it was hidden by a parent element with a
display: none;attribute. Because of this, theclientWidthandclientHeightproperties of my SVG return0. Sinceattachalso results inzoombeing called, this was causing some issues. IfclientWidthandclientHeightreturn0, this results in thezoomfunction attempting to perform the following transformation:translate(NaN,NaN)scale(-Infinity)In chrome, this results in a console error log and is not a huge deal. However, in Firefox this will actually throw back an exception, resulting in the SVG never being properly attached.
I fixed this issue by waiting to attach my SVG until the user opens the modal. However, this issue could be prevented by returning early from the
zoomfunction if eitherparentWidthorparentHeightare falsey.