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

Question

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

Answer 1

要回答您的第二个问题，一种方法是获取 SVG 的父节点的内容（假设您的 SVG 包含在具有 id 的节点中my_svg_container），并将其重新打包为可以打开的“真实”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 表单到POSTCGIresult脚本，将其作为文件打印到请求的 Web 浏览器。当单击按钮或发生设置为触发表单的其他事件时，将触发表单。然后浏览器询问用户将文件保存到本地文件系统。

如果一个示例表单包含字段svg_data和svg_fn，其中包含 SVGresult和您选择的一些文件名，一个非常基本的 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 文件而不是其他文件。