Как сэкономить диаграмму D3 v4 как картинка

Я нашел несколько примеров того, как экспортировать диаграмму D3 и сохранить ее как изображение, но, к сожалению, никто не работает для меня. Прежде всего я пытаюсь с очень простым вариантом преобразование этого SVG и добавить его в DOM:Как сэкономить диаграмму D3 v4 как картинка

let html = self.svg 
     .attr("version", 1.1) 
     .attr("xmlns", "http://www.w3.org/2000/svg") 
     .node().parentNode.innerHTML; 

let imgsrc = 'data:image/svg+xml;base64,' + btoa(html); 
    let img = '<img src="' + imgsrc + '">'; 
    self.D3.select("#svgdataurl").html(img);

Но я получаю эту ошибку:

Любую идею о том, что происходит?

источник

2016-12-12 J. Escalona

Ну, ошибка говорит, что у вас есть фиктивный контент в вашем SVG. Учитывая, что вы не показали нам ваш SVG, я не уверен, как можно ответить на этот вопрос ... Мой WAG - это то, что ваш .parentNode.innerHTML высасывает некоторый HTML-код за тегом 'svg'. – Mark

Привет! спасибо за ваш ответ, проблема была ясна. У меня был другой элемент, который использовал один и тот же контейнер с SVG, и это вызывало проблему. С другой стороны, мне пришлось включать стили в объекты D3 вместо использования классов css, чтобы сохранить стили в сгенерированном изображении. –

Проблема была ясна. У меня был другой элемент, который использовал один и тот же контейнер с SVG, и это вызывало проблему. С другой стороны, мне пришлось включать стили в создание объектов D3 вместо этого, используя классы css, чтобы сохранить стили в сгенерированном и экспортируемом изображении.

источник

2016-12-15 14:42:15

Как сэкономить диаграмму D3 v4 как картинка

ответ

Смежные вопросы