d3.v3.min.js:1 Error: <svg> attribute height: Expected length, “NaN” while loading a d3 chart in a m

[aksha...@gmail.com]

down votefavorite

I have been trying to load a bigger size chart in modal popup onClick of smaller chart . I have made the chart responsive by resizing it's viewbox . But the issue i am now facing is that the first chart is becoming responsive and loading on the main page . But when i am clicking that graph to load a bigger chart in viewbox , i am getting an error d3.v3.min.js:1 Error: attribute height: Expected length, "NaN" . And the strange thing is i am using the same directive & same controller for both the charts , for the first chart the viewbox width is giving a value but for other it's giving NaN . Any help is appreciated thanks in advance . Here is the pluker .

[Curran]

Hello,

If I click on the chart in your Plunker, it displays a larger chart and does not throw that error. I'm on Chrome in a Mac. Which browser and OS are you on?

It might be an issue where the D3 code is getting executed too early, before the DOM gets its initial size. Since you are actually defining the size from inline CSS, the browser needs to render the container before your D3 code can get access to the size (in pixels) computed from the inline CSS.

Regards,

Curran

Datavis.tech