Existe-t-il un moyen de rendre les nœuds glissants/vers un autre nœud parent ou enfant pour réorganiser les nœuds dans d3.js ?

Question

En cherchant des contrôles d'organigramme hiérarchique, je suis tombé sur un post sur la façon d'orienter les nœuds dans d3.js, et je me demandais s'il existait des contrôles d'organigramme hiérarchique. 1) un moyen d'éditer les enfants de l'arbre et de les faire glisser. 2) comment exporter l'arbre édité.

Answer 1

Pour répondre à votre deuxième question, il est possible de récupérer le contenu du nœud parent de votre SVG (disons que votre SVG est contenu dans un nœud avec l'id my_svg_container ), et le reconditionner comme un "vrai" fichier SVG qui peut être ouvert dans un éditeur compatible SVG comme Inkscape ou 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>';

T outerHTML() fonction :

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

Utilisez ensuite un formulaire web caché pour POST que result à un script CGI qui l'imprime au navigateur web demandeur sous forme de fichier. Le formulaire est déclenché lorsqu'un bouton est cliqué ou qu'un autre événement se produit qui est défini pour déclencher le formulaire. Le navigateur demande alors à l'utilisateur d'enregistrer le fichier dans le système de fichiers local.

Si un exemple de formulaire contient les champs svg_data y svg_fn qui contiennent le SVG result et un nom de fichier de votre choix, un script Perl très basique pourrait ressembler à quelque chose comme :

#!/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;

Vous pouvez ajouter un code de validation des données pour vous assurer que vous imprimez bien un fichier SVG et pas autre chose.