javascript - 使用按钮将 d3 词云导出为 png

Question

我正在尝试使用按钮将词云导出为 png。

更具体地说，我尝试合并 Rokotyan's implementation对于 d3 的圈子 ericcoopey's example的词云。

我将控制按钮的代码放在 draw() 函数中:

function draw(words) {
    var svg = d3.select("body").append("svg")
            .attr("width", 850)
            .attr("height", 350)
            .attr("class", "wordcloud")
            .append("g")
            .attr("transform", "translate(320,200)")
            .selectAll("text")
            .data(words)
            .enter().append("text")
            .style("font-size", function(d) { return d.size + "px"; })
            .style("fill", function(d, i) { return color(i); })
            .attr("transform", function(d) {
                return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
            })
            .text(function(d) { return d.text; });

     d3.select('#saveButton').on('click', function(){
       var svgString = getSVGString(svg.node());
       svgString2Image( svgString, 2*width, 2*height, 'png', save );

       function save( dataBlob, filesize ){
         saveAs( dataBlob, 'D3 vis exported to PNG.png' );
       }
     });
     // other functions come here
}

单击按钮时没有下载，对象也存在(当记录 svgString 时我得到一些输出，但它比 ericcoopey 示例中的 svgString 短得多)。这里有什么问题吗？

这是我的 fiddle :https://jsfiddle.net/merose/k7eL3k3y/1/

Answer 1

如果您在控制台中检查 svg.node()，它只是文本的一个子集，因此 svgString 不是 SVG 的表示 整体。错误在于 var svg 声明，即变量 svg 被分配了一个 g 然后 selectAll(text) 使其值只是文本的一个子集。

如果将 var svg 的声明更改为以下结构:

var svg = d3.select("body").append("svg")
  .attr("width", 850)
  .attr("height", 350)
  .attr("class", "wordcloud");

svg  
  .append("g")
  // without the transform, words words would get cutoff to the left and top, they would
  // appear outside of the SVG area
  .attr("transform", "translate(320,200)")
  .selectAll("text")
  .data(words)
  .enter().append("text")

如果您现在检查控制台中的 svg，它将是整个 SVG NODE(这是需要序列化为字符串的内容)。将其导出将生成有效的 png。

这是一个演示: Export d3 word cloud to PNG

希望这对您有所帮助。