0

Web ページに複数の 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>

私が抱えている問題は、ページに複数のグラフがあることです。30 近くのグラフがあり、それらはすべて非表示になっています (表示されているグラフを除く)。どうすればこれを回避できますか？JS では、ターゲット グラフの ID を要求します。表示されているグラフのみをターゲットにするにはどうすればよいですか? これは、できれば IE、Chrome、Firefox、および Safari でも動作する必要があります。

助けてくれてありがとう

編集: 彼がリンクしている Perl スクリプトがあるようです。ファイルをサーバーに保存しましたが、まだ機能しません (download.pl として保存し、.html ファイルと同じフォルダーに保存しようとした後、同じフォルダーに保存しようとしました) .js ファイルとして)。

編集 2: サーバーに libRSVG プラグインがありません。フォルダ(V.2.37.0.tar.xz)をダウンロードしたのですが、100個くらいのファイルが入っています。どうすればいいですか？

4

1 に答える 1

1

だから私がやったのはSVG Crowbarを使うことでした。複数の SVG 要素を 1 つのページにダウンロードできます。ダウンロードのページにある各 SVG 要素の上に、小さなインライン ウィンドウがポップアップ表示されます。ただし、いくつかの問題があります。1) Internet Explorer では動作しません。2) ユーザーが Chrome でダウンロードするときは外部 CSS スタイルを取得しますが、ユーザーが Firefox でダウンロードするときは外部 CSS スタイルを取得しません。3) 非表示の SVG 要素のダウンロード ボタンを表示します。

これを回避するために、すべてのスタイルをインライン スタイルに変更し、外部スタイルはフォールバックとして残しました。また、IE を使用している場合は Chrome または Firefox をインストールするようユーザーに指示するメッセージをページの上部に残しました。隠し要素の問題に関しては、各グラフを新しいページに移動することになりましたが、表示されているグラフのみを表示する簡単な方法があると確信しています。

私が見つけたもう 1 つのことは、ユーザーがダウンロードを完了したときに、元の画面に戻ることができなかったことです。これは私の側の問題だったと確信しています。

于 2013-07-10T14:40:28.970 に答える