Download d3-Diagramme auf klicken in sapui5

Question

Ich habe ein Venn-Diagramm mit D3 in Sapui5 erstellt. Hinweis: Ich habe Kreise innerhalb des Tags und innerhalb des Tags erstellt, die ich zum Formatieren des Kreises verwendet habe.

Jetzt habe ich einen Button, wenn ich auf den Knopf klicke, kann der Svg heruntergeladen werden und kann angesehen werden.

Die Stile werden nicht angezeigt.

ich so tue Onclick

d3.select("#save").on("click", function(){ 
    var html = d3.select("svg") 
     .attr("version", 1.1) 
     .attr("xmlns", "http://www.w3.org/2000/svg") 
     .node().parentNode.innerHTML; 

    console.log(html); 
    //var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html); 
    //var img = '<img src="'+imgsrc+'">'; 
    //d3.select("#svgdataurl").html(img); 

}); 

könnte jemand mir helfen, dieses Problem zu lösen.

Answer 1

Die Stile werden nicht angezeigt, da sie nicht in Ihrem SVG-Dokument enthalten sind. Sie können ein <style> Tag in Ihrem SVG haben (siehe MDN).

Für Ihren speziellen Fall würde ich die CSS-Regeln für dieses Diagramm in einer separaten Datei angeben, die Sie beim Speichern (wieder) abrufen und in das SVG einbinden können, bevor Sie es zum Download anbieten.

Answer 2

Nichts mit sapui5 zu tun. Sie können Stil zu Svg etwas ähnliches zu diesem .attr("fill", "red"); or .style("fill","red") hinzufügen. Es gibt viel mehr zu diesem Thema this.