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

Question

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

Answer 1

要回答你的第二个问题，一个办法就是抓住你的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添加到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文件而不是其他文件。