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

我正在尝试使用按钮将word cloud导出到png

更具体地说，我尝试将d3的圆与wordcloud的圆合并

我将控制按钮方向的代码放入

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
}

单击按钮时，没有下载，对象也存在（当log

svgString

我得到一些输出时，它比ericcoopey示例中的

svgString

短得多）。这里怎么了

---

这是我的小提琴：

如果在控制台中选中

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节点（这是需要序列化为字符串的部分）。导出此文件将生成有效的png

下面是一个演示：

希望这有帮助