在一页上生成带有多个 D3.js 图形的 PDF/SVG/PNG答案

【问题标题】：Generating PDF/SVG/PNG with multiple D3.js graphs on one page在一页上生成带有多个 D3.js 图形的 PDF/SVG/PNG
【发布时间】：2013-06-26 13:25:32
【问题描述】：

我在网页上有几个 D3.js 图表。当用户点击一个按钮时，新的图表会向下滑动，而旧的图表会向上滑动。我做了一些研究，并找到了一些链接。做我想做的事在这里：http://d3export.cancan.cshl.edu/。但是，我无法让它工作。这是一个 JSFiddle，其中的一些代码与我的非常相似

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），但里面有大约一百个文件。我该怎么办？

【问题讨论】：

如何安装软件取决于您在服务器上运行的操作系统。您应该能够在标准存储库中找到 libRSVG。
还有其他更好的方法吗？即使我刚刚获得了显示图形的可下载 SVG。我试过这个：bl.ocks.org/biovisualize/1209499，但我不知道如何让它使用 CSS，以及如何生成显示图形的图像（例如 jsfiddle.net/UK8bw/6，但这仅适用于一个图形，并且不t 使用 css)
你看过svg2pdf吗？
我今天早些时候看到了它，但我找不到任何实现它的例子。

标签： jquery html svg d3.js

【解决方案1】：

所以我最终做的是使用SVG Crowbar。它允许您在一页上下载多个 SVG 元素。下载页面上的每个 SVG 元素都会弹出一个小内联窗口。但是，也存在一些问题。 1) 它在 Internet Explorer 中不起作用。 2) 用户在 Chrome 中下载时采用外部 CSS 样式，但在用户在 Firefox 中下载时不采用外部 CSS 样式。 3) 它显示了隐藏的 SVG 元素的下载按钮。

为了解决这个问题，我将所有样式更改为内联样式，并将外部样式留作备用。我只是在页面顶部留下了一条消息，指示用户在使用 IE 时安装 Chrome 或 Firefox。至于隐藏元素问题，我最终将每个图表移动到一个新页面，但我确信有一些简单的方法可以只为显示的图表显示它们。

我发现的另一件事是，当用户完成下载后，我无法返回原始屏幕。我确定这只是我的问题。

【讨论】：