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

Question

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

更具体地说，我尝试合并词云的 Rokotyan's implementation for d3's circles with 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

希望这对您有所帮助。

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

Export d3 word cloud as png with button

html

javascript

export

word-cloud

d3.js