Question

我在网页上有几张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），但其中有大约一百个文件。我该怎么办？

Answer 1

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

要解决此问题，我将所有样式更改为内联样式，并将外部样式保留为后备样式。我刚刚在页面顶部留言，指示用户在使用IE时安装Chrome或Firefox。至于隐藏元素问题，我最终将每个图形移动到一个新页面，但我确信有一些简单的方法只显示它们用于显示的图形。

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

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

1 个答案: