使用JS视图时，如何在SAP UI5中使用D3元素? [英] How to Use D3 elements inside SAP UI5 , when using JS views?

问题描述

假设我们要使用D3 JS库数据可视化功能并在SAP UI5应用程序中使用它，(已经在sap.m中使用基于D3的VIZ库，但希望具有更多的元素和更多的功能来表示数据)

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 )

• 是否可行?
• 如果是，那么是否有其他基于D3库的框架可以用来进行集成，因为SAP UI5是一个面向对象的框架，并且在视图内部编写D3代码不起作用?

找到失败的集成试用，该试用成功执行了独立的D3代码:

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

推荐答案

是否可行?

Is it possible and advisable ?

绝对可以.

如果是，那么是否有任何其他基于D3库的框架可以用来进行集成，因为SAP UI5是一个面向对象的框架，并且在视图内部编写D3代码不起作用?

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 ?

您不需要包括其他框架来执行此操作，应该可以在js视图中直接编写d3代码，但这不是一个好习惯.您应该编写一个单独的图表模块并在视图中使用它.

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 的答案很好，但是我认为创建一个自定义控件以将图表集成到UI5应用程序中是过大的，我写了一篇有关另一种方法的博客，我认为这更容易且更容易.优越的.一探究竟.

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/

尽管在我的博客中，我使用的是xml视图，但转换为js视图应该非常容易.

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

这篇关于使用JS视图时，如何在SAP UI5中使用D3元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！