How to use D3 elements inside SAP UI5 when using JS views?
Suppose we want to use the data visualization ability of the D3 JS library and use it in a SAP UI5 application (already using the VIZ library, which is based on D3 in sap.m, but wants more elements and more possibilities for data presentation)
- Is it possible and advisable?
- If so, is there any other framework based on the D3 library that can be used for integration since SAP UI5 is an object oriented framework and D3 code inside the view doesn't work?
Find below the failed integration process where the D3 standalone code execution was successful:
createContent : function(oController) {
var canvas = d3.select("idPage01")
.append("svg")
.attr("width",4000)
.attr("height",2000)
.attr("length",100);
canvas.append("circle")
.attr("cx", 200)
.attr("cy",200)
.attr("r",10);
var lv_Page = new sap.m.Page("idPage01",{
title: "VIZ",
content: [
canvas
]
});
return lv_Page;
}
The error displayed on the console:
Uncaught TypeError: Cannot read property 'render' of undefined
source to share
I've never put it in a view directly, but with a custom control like this http://jsbin.com/hacuw/1/edit
Thanks -D
source to share
Is this possible and advisable?
Absolutely yes.
If so, is there any other framework based on the D3 library that can be used for integration, since SAP UI5 is an object oriented framework and writing D3 code inside a view does not work?
You don't need to include other infrastructure for this, you need to be able to write d3 code directly in the js view, but this is not a good practice. You have to write a separate chart module and use it in your view.
user3808826's answer is great, but I think creating a custom control to integrate the chart into a UI5 app is overkill, I wrote a blog about another approach which I think is simpler and better. Check it.
https://hatelove85911.github.io/2016/03/23/Integrate-D3-chart-into-UI5-Application/
Although I use xml view on my blog, it is very easy to convert to js view.
source to share