Hi awesome Ionic community,
I have an app with a TabPage like this:
In my ProfilePage, I draw an SVG (using d3) and it works fine.
Here is the problem:
I am in a page from HomePage, named CategoryPage and user clicks on a button and I realize he’s not logged in, so I push LoginPage (navCtrl.push(LoginPage)) and user enters login info and on success I do a navCtrl.pop(); to go back to CategoryPage. So now, if I hit the Profile tab in the bottom and go to that page, my SVG is NOT shown there (TreePage) anymore. The code is executed but not shown. I inspected the page source and I can see my SVG is inserted to the CategoryPage instead of TreePage!
I am really confused and frustrated by this issue, any help is appreciated.
Ionic Framework : ionic-angular 3.1.0
Can you show how you are drawing the image? I fear you are directly trying to access DOM elements, and that is a bad idea in Angular apps.
@behrooz2 Hello,
Sorry to ask this question but if this is your first time with Ionic code? Did you make tests with ionic run on usb (android/ios build) before asking for questions in forum?
Never tested Draw3D/SVG rendering but I guess this is a bit risky with Ionic. After it’s all typescript code, but I didn’t see any native plugin and officially supported plugin for that yet?
I finally point out to you that, if you use that kind of 2D drawing, it should be used on the template view only if the drawing is finished (possibly with a *ngif condition, in your html view/template), otherwise your app will go crazy calling stg that doesn’t exist YET (Ionic and Angular are fully ASYNC, remember).
Have fun with Ionic,
Hi guys,
Thanks for the prompt replies. I was able to solve my issue. So here is what was happening. In my TreePage I was adding my svg graph via:
d3.select(‘svg’).append(blah)…
then when I come back from another page since PageTab keeps the code for those pages in the dom, d3 selector was returning an ‘svg’ element (an icon), in another page instead of the one in my TreePage. I solved it by adding a specific id to my element in TreePage html and selecting it like: d3.select(’#specificID).append(blah). Everything work perfectly fine.
Regarding d3 and latest ionic, I draw very complicated graphs and trees. Therefore, I can’t really not use d3. I draw stuff on pageDidLoad so elements must be rendered at that time. I had no issue with it (except this one) and it works very smoothly and nice on native devices as well as webview, even animations and transitions are very smooth!
Thanks everyone,
