0

I have several D3.js graphs on a webpage. When the user clicks on a button, the new graph will slide down, while the old one will slide up. I did some research, and found a few links. The one that does what I want to do is here: http://d3export.cancan.cshl.edu/. However, I cannot get it to work. Here is a JSFiddle with some code that is very similar to mine

http://jsfiddle.net/hd48L/

Here is the JS code

$(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"); });
});

Here is similar HTML to mine

<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>

The problem that I am having is that I have more than 1 chart on the page. I have close to 30 graphs, with all of them hidden (besides the one that is shown). How would I get around this? In the JS, it asks for the ID of the target graph. How do I get it to target only the graph that is shown? This also has to work in IE, Chrome, Firefox and Safari, preferably.

Thanks for all the help

EDIT: I see that there is a Perl script that he links to. I saved the file to my server, and it still does not work (I saved it as download.pl, and I tried to save it in the same folder as the .html file, and then I tried to save it in the same folder as the .js file).

EDIT 2: I am missing the libRSVG plugin on my server. I downloaded the folder (V. 2.37.0.tar.xz), but there is about a hundred files in it. What do I do with it?

4

1 回答 1

1

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

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

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

于 2013-07-10T14:40:28.970 回答