在一頁上生成具有多個D3.js圖形的PDF/SVG/PNG

我在網頁上有幾個D3.js圖形。當用戶點擊一個按鈕時，新圖形將滑下，而舊圖形將向上滑動。我做了一些研究，並找到了一些鏈接。做我想做的是這裏：http://d3export.cancan.cshl.edu/。但是，我無法讓它工作。這裏是一個的jsfiddle一些代碼，這是非常類似地雷在一頁上生成具有多個D3.js圖形的PDF/SVG/PNG

http://jsfiddle.net/hd48L/

這裏是JS代碼

$(function() { 
    $(".show").click(function() { 
     $(".targetDiv").slideUp("fast"); 

     if ($("#graph" + $(this).attr("target")).css("display") != "block") { 
      $("#graph" + $(this).attr("target")).slideDown("fast"); 
     } 
    }); 
}); 

(function() { 
    // Graph 1 code 
    show_svg_code(); 
})(); 

(function() { 
    // Graph 2 code 
    show_svg_code(); 
})(); 

// ... etc. 

function submit_download_form(output_format) { 
    var tmp = document.getElementById(/* What ID goes here? */); 
    var svg = tmp.getElementsByTagName("svg")[0]; 
    var svg_xml = (new XMLSerializer).serializeToString(svg); 

    var form = document.getElementById("svgform"); 
    form['output_format'].value = output_format; 
    form['data'].value = svg_xml ; 
    form.submit(); 
} 

function show_svg_code() { 
    var tmp = document.getElementById("#graph1"); 
    var svg = tmp.getElementsByTagName("svg")[0]; 
    var svg_xml = (new XMLSerializer).serializeToString(svg); 

    $("#svg_code").text(svg_xml); 
} 

$(document).ready(function() { 
    $("#save_as_svg").click(function() { submit_download_form("svg"); }); 
    $("#save_as_pdf").click(function() { submit_download_form("pdf"); }); 
    $("#save_as_png").click(function() { submit_download_form("png"); }); 
});

這裏是類似於HTML礦

<a class="show" target="1">Chart 1</a> 
<a class="show" target="2">Chart 2</a> 
// ... etc. 

<button type="button" onclick="javascript:submit_download_form('svg')">SVG</button> 
<button type="button" onclick="javascript:submit_download_form('pdf')">PDF</button> 
<button type="button" onclick="javascript:submit_download_form('png')">PNG</button> 

<div id="graph1" class="targetDiv"></div> 
<div id="graph2" class="targetDiv"></div> 
// ... etc. 

<form id="svgform" method="post" action="download.pl"> 
    <input type="hidden" id="output_format" name="output_format" value=""> 
    <input type="hidden" id="data" name="data" value=""> 
</form>

的問題我的是，我有超過1圖表在頁面上。我有近30個圖表，其中隱藏了所有圖表（除了顯示的圖表之外）。我將如何解決這個問題？在JS中，它要求目標圖的ID。我如何才能將其僅定位到顯示的圖形？這也必須在IE，Chrome，Firefox和Safari中運行。

感謝所有幫助

編輯：我看到有他鏈接到一個Perl腳本。我將文件保存到我的服務器，但它仍然不起作用（我將它保存爲download.pl，並且我試圖將它保存在與.html文件相同的文件夾中，然後我嘗試將它保存在同一文件夾中作爲.js文件）。

編輯2：我缺少我的服務器上的libRSVG插件。我下載了該文件夾（V. 2.37.0.tar.xz），但其中大約有一百個文件。我該怎麼處理它？

來源

2013-06-26 TFischer

如何安裝軟件取決於您在服務器上運行的操作系統。您應該能夠在標準存儲庫中找到libRSVG。 –

有沒有其他更好的方法來做到這一點？即使我剛剛獲得了可顯示圖形的可下載SVG。我試過這個：http://bl.ocks.org/biovisualize/1209499，但我不知道如何讓它使用CSS，以及如何生成顯示圖形的圖像（例如http：// jsfiddle .net/UK8bw/6 /，但這隻適用於一個圖表，並且不使用css） – TFischer

你有沒有看過[svg2pdf]（http://rhodopsin.blogspot.ie/2009/11/php -class-增加-SVG圖像到PDF-files.html）？ –

所以我最終做的是使用SVG Crowbar。它允許您在一個頁面上下載多個SVG元素。一個小內聯窗口彈出在頁面上的每個SVG元素下載。但是，有一些問題。 1）它在Internet Explorer中不起作用。 2）用戶在Chrome中下載時採用外部CSS樣式，但當用戶在Firefox下載時不採用外部CSS樣式。 3）它顯示隱藏的SVG元素的下載按鈕。

要解決這個問題，我將所有樣式都改爲內聯樣式，並將外部樣式作爲後備樣式。我只是在頁面頂部留言，指示用戶如果使用IE瀏覽器安裝Chrome或Firefox。至於隱藏的元素問題，我最終將每個圖形移動到一個新頁面，但我確定有一些簡單的方法只顯示它們顯示的圖形。

我發現的另一件事是，當用戶完成下載時，我無法回到原始屏幕。我確信這只是我的一個問題。

來源

2013-07-10 14:40:28 TFischer

在一頁上生成具有多個D3.js圖形的PDF/SVG/PNG

回答

相關問題