Is it possible to edit a node in-place in any javascript tree visualization toolkit (preferably InfoVis)?
-
19-03-2021 - |
문제
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?
해결책
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.