Is there a way to make the nodes draggable/to another parent or child node to rearrange the nodes in d3.js - d3.js

Question

While searching for hierarchical org chart controls, I came across a post on how to orient the nodes in d3.js, and I was wondering if there 1) was a way to edit the tree/drag children. 2) how to export the edited tree.

Answer 1

To answer your second question, one way is to grab the content of the parent node of your SVG (let's say your SVG is contained in a node with the id my_svg_container), and repackage it as a "true" SVG file that can be opened in an SVG-capable editor like Inkscape or 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>';
The outerHTML() function:
jQuery.fn.outerHTML = function() {
return jQuery('<div />').append(this.eq(0).clone()).html();
};
Then use a hidden web form to POST that result to a CGI script that prints it to the requesting web browser as a file. The form is triggered when a button is clicked or some other event occurs that is set to trigger the form. The browser then queries the user to save the file to the local file system.
If an example form contains the fields svg_data and svg_fn, which contain the SVG result and some filename of your choice, a very basic Perl script might look something like:
#!/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;
You might add some data validation code to make sure you're printing an SVG file and not something else.