如何在使用JS視圖時使用SAP UI5內部的D3元素？

假設我們要使用D3 JS庫數據可視化能力，並使用它裏面SAP UI5應用程序，（已經在使用它是基於D3在sap.m VIZ庫但希望有更多的元素和更多的功能來表示數據）如何在使用JS視圖時使用SAP UI5內部的D3元素？

是否有可能和建議？
如果是，那麼是否有基於D3庫的任何其他框架，它可以用來做集成爲SAP UI5是視圖內一個面向對象的框架和編寫代碼D3不工作？

找到整合的失敗試驗，其中獨立D3代碼執行成功，如下：

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

它在控制檯中顯示的錯誤是：

Uncaught TypeError: Cannot read property 'render' of undefined

來源

2014-09-01 Ajay

我從來沒有把它在一個視圖直接，但通過像這樣的自定義控件 http://jsbin.com/hacuw/1/edit

謝謝 -D

來源

2014-09-02 02:34:17 user3808826

是的，我們可以直接在DOM元素進行操作，並添加所需的更改，讓我知道，如果有這樣的一些其他的例子。 – Ajay 2014-09-02 05:56:05

@Ajay我也體驗到，當在D3初始化完成onAfterRendering方法時，它效果最好。如果你不想擴展一個新的自定義控件，你可以用常規的'sap.ui.core.HTML'創建一個'div'元素。 – BassT 2014-09-25 13:31:02

好吧，檢查一下，構建一個像VIZ這樣的新框架，以便能夠提供開放的UI5用戶功能，比如VIZ和更多...：D – Ajay 2014-09-26 10:33:42

這是可能的和可取的嗎？

絕對沒錯。

如果是的話，那麼是否還有其他基於D3庫的框架可以用來進行整合，因爲SAP UI5是一個面向對象的框架，並且在視圖內編寫D3代碼不起作用？

你不需要包含其他框架來做到這一點，應該可以直接在js視圖中編寫d3代碼，但這不是一個好的做法。您應該編寫一個單獨的圖表模塊並在視圖中使用它。

user3808826的答案是偉大的，但我想創建一個自定義的控制是矯枉過正，我寫了一個關於另一種方法，我認爲這是比較容易和卓越的博客，以圖表爲UI5應用程序集成。一探究竟。

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

雖然在我的博客，我使用的XML視圖，它應該是很容易轉換成JS視圖。

來源

2016-03-23 10:28:54

我正在使用您在博客中提到的代碼。我可以成功繪製餅圖，但只有一秒鐘，然後消失。 – user557657 2017-02-16 19:14:01

指向該博客的鏈接已死亡。 – rene 2017-11-19 19:40:05

我用[Internet Archive Wayback Machine]（https://web.archive.org/）中的副本替換了無效鏈接 – 2017-11-19 20:02:11

如何在使用JS視圖時使用SAP UI5內部的D3元素？

回答

相關問題