2

階層的な組織図コントロールを検索しているときに、d3.js でノードの向きを設定する方法に関する投稿に出会いました。1) ツリーを編集したり、子をドラッグしたりする方法があるかどうか疑問に思っていました。2) 編集したツリーをエクスポートする方法。

4

1 に答える 1

1

2 番目の質問に答えるには、SVG の親ノードのコンテンツを取得し (SVG が id のノードに含まれているとしますmy_svg_container)、それを「真の」SVG ファイルとして再パッケージ化することです。 Inkscape や Illustrator などの SVG 対応エディター:

var rawSvg = $('#my_svg_container').outerHTML();
var result = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" version="1.1">' + rawSvg + '</svg>';

outerHTML()機能:

jQuery.fn.outerHTML = function() {
    return jQuery('<div />').append(this.eq(0).clone()).html();
};

次に、非表示の Web フォームを使用してPOST、resultそれを要求している Web ブラウザーにファイルとして出力する CGI スクリプトを実行します。ボタンがクリックされるか、フォームをトリガーするように設定されているその他のイベントが発生すると、フォームがトリガーされます。次にブラウザは、ファイルをローカル ファイル システムに保存するようにユーザーに問い合わせます。

フォームの例に、SVGと選択したファイル名を含むフィールドsvg_dataとが含まれている場合、非常に基本的な Perl スクリプトは次のようになります。svg_fnresult

#!/usr/bin/perl

use strict;
use warnings;
use CGI;
use CGI::Pretty qw/:standard/;

my $val = param('svg_data');
my $fn = param('svg_fn');

print "Content-Type: application/x-gzip\n";
print "Content-Disposition: attachment; filename=$fn\n";
print "Content-Description: File to download\n\n";
print $val;

SVG ファイルを印刷していることを確認するために、データ検証コードを追加することもできます。

于 2012-11-03T00:01:03.513 に答える