Hi Tak, In that example, I've used Nodes=new Array() as a place to store each node, which is of the form function Node(x,y,id,label,col){ this.x=x this.y=y this.id=id this.label=label this.col=col this.links=new Array() this.info=label } that is, the information about which nodes a given node is connected to is stored in an array of its own links. I find it easier to store what is called an incidence matrix rather than an adjacency matrix (as some sort of sparse matrix) since the graph is being constructed on the fly and we don't know how big it will be. Each time a pair of nodes is connected, the links array of each is updated.
In terms of storing the structure, yes, one would have to serialize it by somehow converting that JavaScript object back to something saveable. A more fully implemented version of this was done using VML several years ago http://srufaculty.sru.edu/david.dailey/grapher/ . (earlier versions were written in hyperTalk, CMUTutor and Java/awt. It has heuristics for coloring and dominating sets, as well as shortest path algorithms, complements, copying, pasting, extruding and so forth. It also (running only in IE) takes advantage of ActiveX to do document.execCommand('SaveAs',false, '.xml') so that files may be written to (and later retrieved from) local file space -- something web apps rather need and which HTML5 WG seems reluctant to implement. So in the meantime, yes one would have to package up the content and ship it somewhere to a server and then build a file browser on the server so that the local web app could later retrieve its data. Hope this helps David ----- Original Message ----- From: takpoli To: svg-developers@yahoogroups.com Sent: Friday, July 18, 2008 10:26 AM Subject: [svg-developers] Re: Looking for that great drag node and edge example Hi David, Thanks for last and this replies. You have an other cool demo. I read the code, please correct me if I am wrong, it seems you use Nodes=new Array() in Javascript code for the link between the node and the line. In other word, if the user creates the graph, this information along with the svg object have to be stored to the server for the user to reload his design the next day. I am thinking to use <g .. /> and the hidden text to store the information. The circle (rect in your demo) should know which line and which end of the line it is attached. Do you know anybody has simular experance that can be shared? Thanks, Tak --- In svg-developers@yahoogroups.com, "ddailey" <[EMAIL PROTECTED]> wrote: > > Here's another thing that allows the nodes of graphs to be dragged so that the connections follow: > > http://srufaculty.sru.edu/david.dailey/svg/graphs30.svg > > You'll want to change mode from "travel" to "normal" , perhaps to disable the animation. > > In a simpler example, http://srufaculty.sru.edu/david.dailey/svg/graphs18.svg , > > you can build graphs from scratch, with mouse clicks to create nodes, select and connect them. > > The data structure is basically given by an array of objects constructed thusly: > > function Node(x,y,id,label,col){ > this.x=x > this.y=y > this.id=id > this.label=label > this.col=col > this.links=new Array() > this.info=label > } > NB=new Node(x,y,nodenum,w, Colors[i%Colors.length]) > Nodes.push(NB) > > David > ----- Original Message ----- > From: takpoli > To: svg-developers@yahoogroups.com > Sent: Thursday, July 17, 2008 9:39 PM > Subject: [svg-developers] Re: Looking for that great drag node and edge example > > > > In Hetko's demo, I would like to link x1, y1 of the line by the id > of circle1 and x2, y2 by the id of circle2. Is there some extra > location in the DOM structure to do that? > > Both circles and lines (> 100 each) are generated dynamically. I > would to update x1 and y2 when circle1 is moved. > > Thanks, > > Tak > > --- In svg-developers@yahoogroups.com, "Heiko Niemann" <me@> > wrote: > > > > Hi, > > > > probably not the one you are talking about but it does what you are > > talking about. :) Besides it's several month old, too. > > > > http://www.zuccaralloo.de/devgroup/samples/boundRectangle.svg > > > > Regards, > > Heiko > > > > http://www.zuccaralloo.de/devgroup > > > > > > > > --- In svg-developers@yahoogroups.com, "run2bmi21" > > <Douglas.R.Aker@> wrote: > > > > > > > > > A few month's back in these postings, I saw reference to an > excellent > > > javascript (I think) drag and drop example of two nodes (squares > I > > > think) connected by an edge. When you drag the node, the > connecting > > > edge drags with it. > > > > > > Anybody remember the URL of that example? I searched the > postings for > > > 30 minutes but couldn't find it. This time I'll bookmark it > > > immediately! > > > > > > Thanks, > > > Doug > > > > > > > > > > > [Non-text portions of this message have been removed] > [Non-text portions of this message have been removed] ------------------------------------ ----- To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: mailto:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] <*> To unsubscribe from this group, send an email to: [EMAIL PROTECTED] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/