javascript - 使用 JS View 时如何在 SAPUI5 中使用 D3 元素？

Question

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

• 是否可行且可取？
• 如果是，那么是否有任何其他基于 D3 库的框架可用于进行集成，因为 SAPUI5 是一个面向对象的框架并且在 View 中编写 D3 代码是行不通的？

在下面找到失败的集成试验，其中独立 D3 代码的执行是成功的。

它在控制台中显示的错误是:

Uncaught TypeError: Cannot read property 'render' of undefined

代码:

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;
}

Answer 1

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 ?

你不需要包含其他框架来做到这一点，直接在js View 中编写d3代码应该是可以的，但这不是一个好的做法。您应该编写一个单独的图表模块并在您的 View 中使用它。

user3808826 的回答很好，但我认为创建一个自定义控件以将图表集成到 UI5 应用程序中有点矫枉过正，我写了一篇关于另一种方法的博客，我认为这种方法更简单而且优越的。一探究竟。

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

虽然在我的博客中，我使用的是xml View ，但转换成js View 应该很容易。