Question

我正在尝试使用按钮将文字云导出到png。

更具体地说，我尝试将d3的圈子Rokotyan's implementation与wordcloud的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短得多）。这有什么不对？

这是我的小提琴：https://jsfiddle.net/merose/k7eL3k3y/1/

Answer 1

如果您在控制台中检查val bitmap = this.getBitmapFromVectorDrawable(R.drawable.ic_done_white_24dp)，它只是文本的一个子集，因此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 NODE （这是序列化为字符串所需的内容）。导出这将导致有效的png。

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

希望这有帮助。

导出d3词云作为png与按钮

1 个答案: