无法使用DIV元素导出c3.js图表

Question

我使用c3.js

创建了这个图表

Top的两个文本/数字行在Div中。左下角的两个按钮正在成功将此SVG图表转换为png和pdf。现在我的客户希望使用PDF和JPG导出top的两个文本行。但PDF和JPG程序只导出SVG元素。如何使用具有相同格式的SVG添加这两个文本行，以便它们可以使用图表导出？

我尝试使用此javascript代码将div添加到SVG元素中。

var ns = 'http://www.w3.org/2000/svg';
var svg = document.querySelector( 'svg' );
var foreignObject = document.createElementNS( ns, 'foreignObject');
foreignObject.setAttribute('height', 300);
foreignObject.setAttribute('width', '100%');
var div = document.createElement('div');
div.innerHTML = '<div><div class="export-text"><span class="export-text-heading">{{DISPLAY DATA HERE}}</span></div></div>';
foreignObject.appendChild( div ); 
svg.appendChild(foreignObject); 

内部输出有多个div。但JPG和PDF导出程序不允许导出div并显示此错误。

  

将数据URI加载为以下图像时出错   SVG

我的PDF导出代码

function export_pdf_tracker(){
  $('#chart-tracker').find('svg').attr('xmlns','http://www.w3.org/2000/svg');
  xepOnline.Formatter.Format('chart-tracker',{pageWidth:'20in', pageHeight:'15.5in',render:'download', srctype:'svg', filename:'Activity-Tracker-Report', resolution:'300', cssStyle:[{fontSize:'40px'},{fontWeight:'bold'}]});
}

我的PNG / JPG导出代码是

function svgToPng(chartID) {
    //fix weird back fill
    d3.select('#'+chartID).selectAll("path").attr("fill", "none");
    //fix no axes
    d3.select('#'+chartID).selectAll("path.domain").attr("stroke", "black");
    //fix no tick
    d3.select('#'+chartID).selectAll(".tick line").attr("stroke", "black");
    var svgElement = $('#'+chartID).find('svg')[0];
    saveSvgAsPng(svgElement, chartID+'.png');
}

两个代码都成功运行，但没有使用div元素。

这是我在图形上添加div时的显示方式。

但无法使用div导出。请建议是否有任何方法可以在SVG图中添加这两行的布局，以便它可以轻松导出，或者是否有任何代码将div转换为svg？

Answer 1

我找到了答案。我编写了这段代码来添加每个文本块。所以我创建了8个文本块。现在他们完全以JPG和PDF格式出口。

d3.select("#chart-tracker svg").append("text")
 .attr("x", 780 )
 .attr("y", 50)
 .style("text-anchor", "left")
 .style("font-size", "17px")
 .text("Start Date");