Re: [graphviz-interest] SVG: Export edges as connectors
John Ellson <[email protected]> Mon, 2 Nov 2015 12:35:29 -0500
| Newsgroups | gmane.comp.video.graphviz |
|---|---|
| Message-ID | <[email protected]> |
This is a multi-part message in MIME format. --===============3933450721677183598== Content-Type: multipart/alternative; boundary="------------050407030305050403070003" This is a multi-part message in MIME format. --------------050407030305050403070003 Content-Type: text/plain; charset=windows-1252; format=flowed Content-Transfer-Encoding: 7bit On 11/02/2015 12:28 PM, Gordon Woodhull wrote: > >> On Nov 2, 2015, at 12:01 PM, John Ellson <[email protected] >> <mailto:[email protected]>> wrote: >> On 11/02/2015 11:38 AM, Gordon Woodhull wrote: >>> Hi John, >>> >>> I'm confused by this - does SVG have built-in arrowheads? >> Yes it does, but we don't use them. Istead graphviz just draws >> arrows with polygons in the same way as it does in other renderers. >> So then SVG doesn't know they are arrowheads... Also, the heads >> aren't connected to the edge, which may be a separable isssue, I'm >> not sure. (I think the arrows are "grouped" with the edeg, but that >> that is a different concept.) >>> I thought you always had to manually define the "markers". >> >> Not sure what you mean? > >>> I am sure the parameters are quite different from those that >>> graphviz uses, so it would still be a lot of work to translate the >>> arrow definitions, and they still might not render the same. >> >> Exactly, but thats not what I was suggesting. I was suggesting that >> we could add a separate arrow set which exactly corresponds to SVGs >> arrrows, whatever they are, but with no support for that SVG arrow >> set in any of the other image formats. > > Okay, I think the source of my confusion is that I thought you were > saying SVG has a set of built-in arrow shapes - AFAICT it does not. > (If you know of one, please share a reference.) > > What it does have is a marker mechanism which could be used, but it > would be a feat to port the existing shapes over to the marker format. Perhaps SVG calls them "edge markers" ? But SVG can definititely draw lines with arrow heads. I'm not suggesting that graphviz draw them at all. Only that graphviz could have a different set of names (a namespage) for turning on the SVG arrow heads. > > Not impossible, just a lot of fiddling probably. And I don't know how > hard it would be to get them to align exactly the same way. Right, I'm definitely not suggesting that we try to draw the equvalents, only that we could offer an option to use them *when* the image format is SVG. Graphviz would have no way to render then in other image formats. > > I will probably have to do some of them in a d3.js context. I will > share what I come up with in case someone wants to port to Graphviz. > Right now I've only done "vee": > > https://github.com/dc-js/dc.graph.js/blob/master/src/diagram.js#L1125-L1129 > https://github.com/dc-js/dc.graph.js/blob/master/src/diagram.js#L1097-L1108 > >>> >>> Cheers, >>> Gordon >>> (busily porting a lot of graphviz-like shapes and attributes to the >>> D3/JS/SVG world...) >>> >>> >>>> On Nov 2, 2015, at 9:49 AM, John Ellson <[email protected] >>>> <mailto:[email protected]>> wrote: >>>> >>>> Matt, >>>> >>>> I don't have a problem with what you are trying to do, but my >>>> problem is that >>>> graphviz has a philosophy of trying to render graphs identically in >>>> all formats, and SVG's set of arrows >>>> are not aiigned with graphviz's. >>>> >>>> We had a similar issue with colors, which was eventually resolved >>>> by introducing sets of color names, so that "SVG color names could >>>> be used instead of "X11" names. >>>> >>>> So probably the right thing to do here is to introduce some >>>> alternate "arrowhead" set support, so that you you could specify >>>> "svg" arrows (and explicitly give up the assurance that it will >>>> look the same in other formats). >>>> >>>> My other problem is that I really don't have the time to work on >>>> this... Perhaps this could be a useful project if someone wanted >>>> to contribute some code? >>>> >>>> John >>>> >>>> On 11/02/2015 09:35 AM, Matt wrote: >>>>> Hi, >>>>> >>>>> [Please keep me in CC] >>>>> [Question at the end and in the title, introduction to the problem >>>>> first] >>>>> >>>>> I have a 20 nodes state machine (fsm) generated with graphviz because >>>>> it was ideal to iterate over the fsm. I now want to generate a proper >>>>> image of this with a well thought layout. My idea was to export to svg >>>>> and then move the nodes as I want them to be. >>>>> The problem is that when I move the nodes, the edges don't follow >>>>> the nodes. >>>>> >>>>> I found out that to have edges follow the nodes, I had to use >>>>> *connectors* instead of *path* elements and I also a found a script >>>>> that just does that : >>>>> http://john-raffensperger.blogspot.fr/2015/05/drag-your-graphviz-nodes-with-inkscape.html >>>>> Kudos to the author ! >>>>> (the script creates straight connectors while it seems possible to >>>>> have *splined* connectors as shown in: >>>>> http://tavmjong.free.fr/SVG/CONNECTORS/index.xhtml but that's not that >>>>> much of a problem for me). >>>>> >>>>> The annoying problem is that the script loses the arrows that showed >>>>> the transition direction. I wondered if: >>>>> 1/ SVG supports directional connectors >>>>> 2/ if 1/, would it be possible to do it in graphviz ? >>>>> >>>>> Best regards >>>>> Matt >>>>> >>>>> PS: I hope this is the good mailing list: I could not find the address >>>>> of the mailing list on page http://www.graphviz.org/MailingList.php >>>>> which is weird, otherwise sorry and please tell me the correct mailing >>>>> list. >>>>> _______________________________________________ >>>>> [email protected] >>>>> http://lists.research.att.com/mailman/listinfo/graphviz-interest >>>> _______________________________________________ >>>> [email protected] >>>> <mailto:[email protected]> >>>> http://lists.research.att.com/mailman/listinfo/graphviz-interest >>> >> > --------------050407030305050403070003 Content-Type: text/html; charset=windows-1252 Content-Transfer-Encoding: quoted-printable <html> <head> <meta content=3D"text/html; charset=3Dwindows-1252" http-equiv=3D"Content-Type"> </head> <body text=3D"#000000" bgcolor=3D"#FFFFFF"> <br> <br> <div class=3D"moz-cite-prefix">On 11/02/2015 12:28 PM, Gordon Woodhul= l wrote:<br> </div> <blockquote cite=3D"mid:[email protected]" type=3D"cite"> <meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3Dwindows-1252"> <div class=3D""><br class=3D""> <div class=3D""> <div> <blockquote type=3D"cite" class=3D""> <div class=3D"">On Nov 2, 2015, at 12:01 PM, John Ellson <<a moz-do-not-send=3D"true" href=3D"mailto:[email protected]" class=3D"">ells= [email protected]</a>> wrote:</div> <div class=3D"">On 11/02/2015 11:38 AM, Gordon Woodhull wrote:<br class=3D""> <blockquote type=3D"cite" class=3D"">Hi John,<br class=3D= ""> <br class=3D""> I'm confused by this - does SVG have built-in arrowheads?<br class=3D""> </blockquote> Yes it does, =A0but we don't use them. =A0Istead graphviz just draws arrows with polygons in the same way as it does in other renderers. =A0=A0So then SVG doesn't know t= hey are arrowheads... =A0=A0Also, the heads aren't connected = to the edge, =A0which may be a separable isssue, =A0I'm not sure. =A0(I think the arrows are "grouped" with the edeg, but that that is a different concept.)<br class=3D""> <blockquote type=3D"cite" class=3D""> =A0I thought you al= ways had to manually define the "markers".<br class=3D""> </blockquote> <br class=3D""> Not sure what you mean?<br class=3D""> </div> </blockquote> <div><br class=3D""> </div> <blockquote type=3D"cite" class=3D""> <div class=3D""> <blockquote type=3D"cite" class=3D"">I am sure the parameters are quite different from those that graphviz uses, so it would still be a lot of work to translate the arrow definitions, and they still might not render the same.<br class=3D""> </blockquote> <br class=3D""> Exactly, but thats not what I was suggesting. =A0I was suggesting that we could add a separate arrow set which exactly corresponds to SVGs arrrows, =A0whatever they are= , but with no support for that SVG arrow set in any of the other image formats.</div> </blockquote> <div><br class=3D""> </div> Okay, I think the source of my confusion is that I thought you were saying SVG has a set of built-in arrow shapes - AFAICT it does not. (If you know of one, please share a reference.) <div class=3D""><br class=3D""> </div> <div class=3D"">What it does have is a marker mechanism which could be used, but it would be a feat to port the existing shapes over to the marker format. <br> </div> </div> </div> </div> </blockquote> Perhaps SVG calls them "edge markers" ?=A0 But SVG can definititely draw lines with arrow heads.=A0=A0=A0 I'm not suggesting that graphvi= z draw them at all.=A0 Only that graphviz could have a different set of names (a namespage) for turning on the SVG arrow heads.<br> <br> <blockquote cite=3D"mid:[email protected]" type=3D"cite"> <div class=3D""> <div class=3D""> <div> <div class=3D""><br class=3D""> </div> <div class=3D"">Not impossible, just a lot of fiddling probably. And I don't know how hard it would be to get them to align exactly the same way.</div> </div> </div> </div> </blockquote> <br> Right, I'm definitely not suggesting that we try to draw the equvalents,=A0 only that we could offer an option to use them *when* the image format is SVG.=A0 Graphviz would have no way to render then= =A0 in other image formats.<br> <blockquote cite=3D"mid:[email protected]" type=3D"cite"> <div class=3D""> <div class=3D""> <div> <div class=3D""><br class=3D""> </div> <div class=3D"">I will probably have to do some of them in a d3.js context. I will share what I come up with in case someone wants to port to Graphviz. Right now I've only done "vee":</div> <div class=3D""><br class=3D""> </div> <div class=3D""><a moz-do-not-send=3D"true" href=3D"https://github.com/dc-js/dc.graph.js/blob/master/src/diagram.js#L= 1125-L1129" class=3D"">https://github.com/dc-js/dc.graph.js/blob/mast= er/src/diagram.js#L1125-L1129</a></div> <div class=3D""><a moz-do-not-send=3D"true" href=3D"https://github.com/dc-js/dc.graph.js/blob/master/src/diagram.js#L= 1097-L1108" class=3D"">https://github.com/dc-js/dc.graph.js/blob/mast= er/src/diagram.js#L1097-L1108</a></div> <div class=3D""><br class=3D""> </div> <blockquote type=3D"cite" class=3D""> <div class=3D""> <blockquote type=3D"cite" class=3D""><br class=3D""> Cheers,<br class=3D""> Gordon<br class=3D""> (busily porting a lot of graphviz-like shapes and attributes to the D3/JS/SVG world...)<br class=3D""> <br class=3D""> <br class=3D""> <blockquote type=3D"cite" class=3D"">On Nov 2, 2015, at 9:49 AM, John Ellson <<a moz-do-not-send=3D"true" href=3D"mailto:[email protected]" class=3D"">= [email protected]</a>> wrote:<br class=3D""> <br class=3D""> Matt,<br class=3D""> <br class=3D""> I don't have a problem with what you are trying to do, =A0but my problem is that<br class=3D""> graphviz has a philosophy of trying to render graphs identically in all formats, =A0and SVG's set of arrow= s<br class=3D""> are not aiigned with graphviz's.<br class=3D""> <br class=3D""> We had a similar issue with colors, which was eventually resolved by introducing sets of color names, =A0so that "SVG color names could be used instead of "X11" names.<br class=3D""> <br class=3D""> So probably the right thing to do here is to introduce some alternate "arrowhead" set support, =A0so that you you could specify<br class=3D""> "svg" arrows (and explicitly give up the assurance that it will look the same in other formats).<br class=3D""> <br class=3D""> My other problem is that I really don't have the time to work on this... =A0=A0Perhaps this could be a useful project if someone wanted to contribute some code?<br class=3D""> <br class=3D""> John<br class=3D""> <br class=3D""> On 11/02/2015 09:35 AM, Matt wrote:<br class=3D""> <blockquote type=3D"cite" class=3D"">Hi,<br class=3D"= "> <br class=3D""> [Please keep me in CC]<br class=3D""> [Question at the end and in the title, introduction to the problem first]<br class=3D""> <br class=3D""> I have a 20 nodes state machine (fsm) generated with graphviz because<br class=3D""> it was ideal to iterate over the fsm. I now want to generate a proper<br class=3D""> image of this with a well thought layout. My idea was to export to svg<br class=3D""> and then move the nodes as I want them to be.<br class=3D""> The problem is that when I move the nodes, the edges don't follow the nodes.<br class=3D""> <br class=3D""> I found out that to have edges follow the nodes, I had to use<br class=3D""> *connectors* instead of *path* elements and I also a found a script<br class=3D""> that just does that :<br class=3D""> <a moz-do-not-send=3D"true" href=3D"http://john-raffensperger.blogspot.fr/2015/05/drag-your-graphviz-= nodes-with-inkscape.html" class=3D"">http://john-raffensperger.blogspot.fr/= 2015/05/drag-your-graphviz-nodes-with-inkscape.html</a><br class=3D""> Kudos to the author !<br class=3D""> (the script creates straight connectors while it seems possible to<br class=3D""> have *splined* connectors as shown in:<br class=3D"= "> <a class=3D"moz-txt-link-freetext" href=3D"http://t= avmjong.free.fr/SVG/CONNECTORS/index.xhtml">http://tavmjong.free.fr/SVG/C= ONNECTORS/index.xhtml</a> but that's not that<br class=3D""> much of a problem for me).<br class=3D""> <br class=3D""> The annoying problem is that the script loses the arrows that showed<br class=3D""> the transition direction. =A0I wondered if:<br class=3D""> 1/ SVG supports directional connectors<br class=3D"= "> 2/ if 1/, would it be possible to do it in graphviz ?<br class=3D""> <br class=3D""> Best regards<br class=3D""> Matt<br class=3D""> <br class=3D""> PS: I hope this is the good mailing list: I could not find the address<br class=3D""> of the mailing list on page <a class=3D"moz-txt-link-freetext" href=3D"http://w= ww.graphviz.org/MailingList.php">http://www.graphviz.org/MailingList.php<= /a><br class=3D""> which is weird, otherwise sorry and please tell me the correct mailing<br class=3D""> list.<br class=3D""> _______________________________________________<br class=3D""> <a class=3D"moz-txt-link-abbreviated" href=3D"mailt= o:[email protected]">[email protected]= rch.att.com</a><br class=3D""> <a class=3D"moz-txt-link-freetext" href=3D"http://lists.research.att.com/= mailman/listinfo/graphviz-interest">http://lists.research.att.com/mailman= /listinfo/graphviz-interest</a><br class=3D""> </blockquote> _______________________________________________<br class=3D""> <a moz-do-not-send=3D"true" href=3D"mailto:[email protected]= .com" class=3D"">[email protected]= </a><br class=3D""> <a class=3D"moz-txt-link-freetext" href=3D"http://lists.research.att.com/= mailman/listinfo/graphviz-interest">http://lists.research.att.com/mailman= /listinfo/graphviz-interest</a><br class=3D""> </blockquote> <br class=3D""> </blockquote> <br class=3D""> </div> </blockquote> </div> <br class=3D""> </div> </div> </blockquote> <br> </body> </html> --------------050407030305050403070003-- --===============3933450721677183598== Content-Type: text/plain; charset="us-ascii" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit Content-Disposition: inline _______________________________________________ [email protected] http://lists.research.att.com/mailman/listinfo/graphviz-interest --===============3933450721677183598==--