Question

在搜索分层组织图表控件时，我遇到了一个关于如何定位d3.js中节点的帖子，我想知道是否有 1）是一种编辑树/拖动子项的方法。 2）如何导出已编辑的树。

Answer 1

要回答第二个问题，一种方法是获取SVG父节点的内容（假设您的SVG包含在标识为my_svg_container的节点中），并将其重新打包为“true” “可以在支持SVG的编辑器中打开的SVG文件，如Inkscape或Illustrator：

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到{CGI'脚本，将其作为文件打印到请求的Web浏览器。单击按钮或发生设置为触发表单的其他事件时，将触发表单。然后，浏览器查询用户以将文件保存到本地文件系统。

如果示例表单包含字段svg_data和svg_fn，其中包含SVG result和您选择的某个文件名，则非常基本的Perl脚本可能类似于：

#!/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文件，而不是其他内容。

有没有办法使节点可拖动/到另一个父节点或子节点重新排列d3.js中的节点

1 个答案: