使用JS视图时，如何在SAPUI5中使用D3元素

Question

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

• 这是可能的和可取的吗
• 如果是，那么有没有其他基于D3库的框架可以用来进行集成，因为SAPUI5是一个面向对象的框架，在视图中编写D3代码是不起作用的

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

控制台中显示的错误为：

未捕获的类型错误：无法读取未定义的属性"render"

代码：

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

这是可能的和可取的吗？

当然可以。

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

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

user3808826的答案很好，但我认为创建一个自定义控件来将图表集成到UI5应用程序中太过分了，我写了一篇关于另一种方法的博客，我认为这种方法更简单、更优越。看看吧。

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

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