Is it possible to edit a node in-place in any javascript tree visualization toolkit (preferably InfoVis)?

Question

I had earlier asked a question asking how/what to use to show to render data in a top-down tree like fashion.

I also stumbled up this post: Graph visualization library in JavaScript where the following toolkits were suggested for visualization:

• arbor.js Sophisticated graphing with nice physics and eyecandy.
• Canviz JS renderer for Graphviz graphs
• Flare Beautiful and powerful Flash based graph drawing
• Graph JavaScript framework, version 0.0.1 Basic graph layout
• Graphviz Sophisticated graph visualization language
• JavaScript Canvas Hyperbolic Tree Small and flexible script
• JavaScript InfoVis Toolkit Jit, an interactive, multi-purpose graph drawing and layout framework
• JS Graph It Promising project using HTML5
• jsPlumb jQuery plug-in for creating interactive connected graphs
• jssvggraph Lightweight yet nice graph layouter
• Moo Wheel Interactive JS representation for connections and relations
• NodeBox Python Graph Visualization
• Protovis Graphical Toolkit for Visualization (JavaScript)

I decided to pick the InfoVis Toolkit's SpaceTree visualization. However, the issue that's been nagging me is no library seems to come with in-place editing of node text...or at least that's what I feel. Our requirement is that when a user clicks a node (or right-clicks and selects an option etc.,) the node text should be editable in place.

Most of the toolkits didn't allow it - they seem to be a read-only visualization/view of the underlying data (except for JS Graph It - however it doesn't have any layouting built in and that's important).

I don't mind changing my choice of toolkit and was wondering if anyone knew either how to edit the text of a node in-place in InfoVis or would recommend another toolkit for that?

Any ideas?

Answer 1

Even though its late, I would answer your question for others having similar requirement.

In infoVis you can simply change the node.name to edit the text of node.

onRightClick: function( node, eventInfo, e){
    node.name = "Changed the name in-place"
    fd.plot(); // fd is an instance of ForceDirected visualization 
} 

Here I am changing node text in-place on right-click event, you can change that as per your need.