Question

我想在SAPUI5中加载一个exranal svg文件。我正在考虑使用D3 JS库来执行此操作

是否可行且可取？

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

Answer 1

可以使用D3加载外部SVG，但它不是内置的。这是一个例子（足球是外部SVG图标）：

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

但是，这不是D3的目的。相反，D3是为基于数据创建复杂的SVG图形而构建的。您最好使用本机Javascript（这主要是在该示例中完成的操作，无论如何，在documentFragment上加载元素然后克隆节点）或其他库。你可能想看看snap.svg，因为它更关注传统的SVG操作。

Answer 2

在下面找到我的解决方案。 onAfterRendering的想法取自SCN。

或者，您可以考虑使用sap.m.Image。根据{{3}}，<img>标记应足以显示来自外部源的SVG。但是，在我的情况下，它没有工作;我怀疑原因是我的服务网址没有返回足够的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);
        }
    }
});

在SAPUI5中使用D3加载外部svg

2 个答案: