Экспорт облака слов d3 в формате png с помощью кнопки

Я пытаюсь экспортировать облако слов в png с помощью кнопки.

В частности, я пытаюсь объединить реализацию Рокотяна для кругов d3 с пример ericcoopey с облаком слов.

Я поместил код для управления кнопкой внутри функции 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 я получаю некоторый вывод, но он намного короче, чем svgString в примере ericcoopey). Что здесь не так?

Вот моя скрипка: https://jsfiddle.net/merose/k7eL3k3y/1/


javascript html d3.js export word-cloud
person MERose    schedule 18.04.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если вы отметите 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.

Вот демонстрация: Экспорт облака слов d3 в PNG

Надеюсь это поможет.

person Shashank    schedule 18.04.2018