SAPUI5에서 D3을 사용하여 외부 svg로드

SAPUI5에서 외부 svg 파일을로드하려고합니다. 이 일을하기 위해 D3 JS 라이브러리를 사용할 생각이었다.SAPUI5에서 D3을 사용하여 외부 svg로드

가능하고 바람직합니까?

그렇다면 SAP UI5가 객체 지향 프레임 워크이고 뷰 내부에 D3 코드를 작성하는 것이 작동하지 않으므로 통합을 수행하는 데 사용할 수있는 D3 라이브러리를 기반으로하는 다른 프레임 워크가 있습니까?

2015-01-08 ankur jain

외부 SVG를 D3과 함께로드 할 수는 있지만 내장되어 있지 않습니다. 여기에 예제합니다 (축구 공 외부 SVG 아이콘입니다)입니다 :

http://bl.ocks.org/emeeks/a347eed5c50a7f1cf08a

그러나,이 D3가 내장되어 것이 아니다. 오히려 D3은 데이터를 기반으로 한 복잡한 SVG 그래픽을 만들기 위해 만들어졌습니다. 네이티브 자바 스크립트 (네이티브 자바 스크립트를 사용하는 것이 가장 좋습니다. 어쨌든 documentFragment에 요소를로드 한 다음 노드를 복제하는 것) 또는 다른 라이브러리를 사용하는 것이 좋습니다. snap.svg는 전통적인 SVG 조작에 더 초점을 맞추기 때문에 볼 수 있습니다.

출처

2015-01-08 15:07:28 Elijah

아래 내 솔루션을 찾으십시오. onAfterRendering의 아이디어는 SCN에서 가져옵니다.

또는 sap.m.Image을 사용할 수도 있습니다. CSS Tricks에 따르면 <img> 태그는 외부 소스에서 SVG를 표시하기에 충분해야합니다. 그러나, 나의 경우에는 그것은 작동하지 않았다; 이유는 내 서비스 URL이 적절한 MIME 유형을 반환하지 않는다는 것입니다 (application/xml이어야 함 : image/svg+xml ???)

return Control.extend("com.example.SvgDisplay", { 
    metadata : { 
     properties: { 
      svgID: "string", 
      mySvg: "object" 
     } 
    }, 

    setSvgID: function(sSvgID) { 
     var that = this, 
      sParams; 

     this.setProperty("svgID", sSvgID, true); 
     if (sSvgID) { 
      sParams = $.sap.encodeURLParameters({ id: sSvgID }); 

      d3.xml("/my/svg/service?" + sParams, function (oError, oDocument) { 
       var oSvgNode; 

       if (oError) { 
        // Do error handling - for example evaluate oError.responseText 
       } else if (oDocument) { 
        oSvgNode = oDocument.lastChild; 
       } 
       that.setMySvg(oSvgNode); // may still be undefined; force re-rendering 
      }); 
     } 
    }, 

    // "static" function, renders the basic <div> tag. The rest will be done by method onAfterRendering 
    renderer : function(oRm, oControl) { 
     var sId  = oControl.getId(), 
      oMySvg = oControl.getMySvg(); 

     oRm.write("<div");    // Control - DIV 
     oRm.writeControlData(oControl); // writes the Control ID and enables event handling - important! 
     oRm.writeClasses(); 
     oRm.write('><div id="' + sId + '-svgContainer"></div>'); 
     oRm.write("</div>");   // end Control - DIV 
    }, 

    onAfterRendering: function(){ 
     var oMySvg = this.getMySvg(), sDomID, oVis; 

     if (oMySvg) { 
      sDomID = this.getId(); 
      oVis = d3.select("#" + sDomID + "-svgContainer").node(); 
      oVis.appendChild(oMySvg); 
     } 
    } 
});

출처

2016-02-24 10:02:13 bgerth

SAPUI5에서 D3을 사용하여 외부 svg로드

답변

관련 문제