Hi all,
I am trying to integrate some D3 into one of my UI5 projects. The project is very simple and structured as follows:
/src/ui/ <--- (the .xsapp/.xsaccess for my UI5 project is in this package)
|- index.html <--- (bootstraps UI5 and places myPage.view.js into its main content div)
|- myPage.controller.js <--- (manages events occurring on its associated view)
|- myPage.view.js <--- (lays out UI5 elements)
The controllercontains an event handler which makes a web request and puts the response data into a JSON model. My goal is to use the data returned from this request to drive a D3 visualisation (a Force Layout to be specific).
As a starting point, I am attempting a basic D3 example which appends a tag at some point within the DOM. The code looks as follows:
// Attempting to append a H1 onto the end of the #content div
d3.select("#content").append("h1").text("test");
Debugging the above statement returns no error, but does not append a H1 to the content div as I intended. I believe that the issue lies in that I am attempting to run the D3 code from inside my controller (I used jQuery.sap.require to access the D3 namespace from this context). Due to this, I suspect that D3 can't locate the DOM elements that I refer to.
Can anyone offer any guidance on the best way to integrate D3 into UI5 project which uses JavaScript MVC?
Thanks in advance for your support.
John