Сохранить диаграмму D3 как изображение

Question

Я создал много диаграммы D3 в приложении.

Но сейчас мое требование - сохранить диаграмму D3 в любом формате, таком как png/gif или pdf.

Я много искал, и каждый говорит, что мы можем использовать холст для этого.

Может кто-нибудь привести пример или ссылку на что ...

Концептуально Я ясно о том, как

Используйте canvg JavaScript библиотеки для визуализации SVG изображения с помощью холсте: https://github.com/gabelerner/canvg

Capture URI данных, закодированный как JPG (или PNG) из Canvas, в соответствии с этими инструкциями: Capture HTML Canvas как gif/jpg/png/pdf?

Что я хочу на самом деле, если кто-то реализовал, то не могли бы вы поделиться этим кодом.

Answer 1

После поиска многих ресурсов и попыток многого, я нашел SaveSvgAsPng на GitHub.

Его очень легко реализовать и использовать с ресурсами, доступными на странице README по той же ссылке.

Шаги

1. Добавить библиотеку Javascript в вашем проекте.
2. Напишите функцию с вызовом saveSvgAsPng, включите другие параметры по мере необходимости.

Пример использования

saveSvgAsPng(document.getElementsByTagName("svg")[0], "plot.png"); 

Пример функции с использованием d3.js

// I have button in html with id="download" 
d3.select("#download") 
.on('click', function(){ 
    // Get the d3js SVG element and save using saveSvgAsPng.js 
    saveSvgAsPng(document.getElementsByTagName("svg")[0], "plot.png", {scale: 2, backgroundColor: "#FFFFFF"}); 
}) 

Для этого примера, мои участки малы для веб-страницы, таким образом увеличенный размер, чтобы удвоить для загрузка и вместо прозрачного фона по умолчанию я изменил на белый.

Answer 2

SaveSvgAsPng работал для меня тоже. Но если вы хотите работать в IE, вам нужно включить «canvg» и передать его в качестве параметра, как показано ниже:

function saveAsImage(name, id) { 

var svg = $('#'+id).find('svg')[0]; 

saveSvgAsPng(svg, name + '.png', { canvg: canvg, backgroundColor: 'white'}); 

} 

параметра «BackgroundColor» также полезно, когда необходимо сохранить с фоном ваших графиков.