How to Use D3 elements inside SAP UI5 , when using JS views?

问题

Suppose we want to use D3 JS library data visualization ability and use it inside SAP UI5 application , (already using VIZ library which is based on D3 in sap.m but want to have more elements and more capabilities to represent data )

• Is it possible and advisable ?
• If yes ,then are there any other framework based on D3 library which can be utilized to do the integration as SAP UI5 is a object oriented framework and writing D3 code inside the view is not working ?

Find below the failed trial of integration , where execution of standalone D3 code 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 it is shown in console is :

Uncaught TypeError: Cannot read property 'render' of undefined

回答1:

Is it possible and advisable ?

Absolutely yes.

If yes ,then are there any other framework based on D3 library which can be utilized to do the integration as SAP UI5 is a object oriented framework and writing D3 code inside the view is not working ?

You don't need to include other framework to do this, it should be possible to directly write d3 code in js view, but that's not a good practice. You should write a separate chart module and consume it in your view.

user3808826's answer is great, but I think creating a custom control to integrate a chart into UI5 application is overkill, I've written a blog about another approach, which I think is easier and superior. Check it out.

https://hatelove85911.github.io/2016/03/23/Integrate-D3-chart-into-UI5-Application/

Although in my blog, I'm using the xml view, it should be very easy to convert into js view.

来源：https://stackoverflow.com/questions/25612362/how-to-use-d3-elements-inside-sap-ui5-when-using-js-views