Re: [graphviz-interest] SVG: Export edges as connectors
Gordon Woodhull <[email protected]> Mon, 2 Nov 2015 12:28:14 -0500
| Newsgroups | gmane.comp.video.graphviz |
|---|---|
| Message-ID | <[email protected]> |
--===============6285082465305887451== Content-Type: multipart/alternative; boundary="Apple-Mail=_C70CB51A-6F43-47E8-A6D0-536D26AB5D5E" --Apple-Mail=_C70CB51A-6F43-47E8-A6D0-536D26AB5D5E Content-Transfer-Encoding: quoted-printable Content-Type: text/plain; charset=windows-1252 > On Nov 2, 2015, at 12:01 PM, John Ellson <[email protected]> = wrote: > On 11/02/2015 11:38 AM, Gordon Woodhull wrote: >> Hi John, >>=20 >> 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". >=20 > 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. >=20 > 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.=20= 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. 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-L112= 9 = <https://github.com/dc-js/dc.graph.js/blob/master/src/diagram.js#L1125-L11= 29> = https://github.com/dc-js/dc.graph.js/blob/master/src/diagram.js#L1097-L110= 8 = <https://github.com/dc-js/dc.graph.js/blob/master/src/diagram.js#L1097-L11= 08> >>=20 >> Cheers, >> Gordon >> (busily porting a lot of graphviz-like shapes and attributes to the = D3/JS/SVG world...) >>=20 >>=20 >>> On Nov 2, 2015, at 9:49 AM, John Ellson <[email protected]> = wrote: >>>=20 >>> Matt, >>>=20 >>> 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. >>>=20 >>> 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. >>>=20 >>> 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). >>>=20 >>> 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? >>>=20 >>> John >>>=20 >>> On 11/02/2015 09:35 AM, Matt wrote: >>>> Hi, >>>>=20 >>>> [Please keep me in CC] >>>> [Question at the end and in the title, introduction to the problem = first] >>>>=20 >>>> 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. >>>>=20 >>>> 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-wit= h-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). >>>>=20 >>>> 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 ? >>>>=20 >>>> Best regards >>>> Matt >>>>=20 >>>> 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] >>> http://lists.research.att.com/mailman/listinfo/graphviz-interest >>=20 >=20 --Apple-Mail=_C70CB51A-6F43-47E8-A6D0-536D26AB5D5E Content-Transfer-Encoding: quoted-printable Content-Type: text/html; charset=windows-1252 <html><head><meta http-equiv=3D"Content-Type" content=3D"text/html = charset=3Dwindows-1252"></head><body style=3D"word-wrap: break-word; = -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;" = class=3D""><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 href=3D"mailto:[email protected]" = class=3D"">[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, 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.)<br class=3D""><blockquote type=3D"cite" class=3D""> = I thought you always 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. 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.</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. </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 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 = href=3D"https://github.com/dc-js/dc.graph.js/blob/master/src/diagram.js#L1= 125-L1129" = class=3D"">https://github.com/dc-js/dc.graph.js/blob/master/src/diagram.js= #L1125-L1129</a></div><div class=3D""><a = href=3D"https://github.com/dc-js/dc.graph.js/blob/master/src/diagram.js#L1= 097-L1108" = class=3D"">https://github.com/dc-js/dc.graph.js/blob/master/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 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, but my problem is that<br = class=3D"">graphviz has a philosophy of trying to render graphs = identically in all formats, and SVG's set of arrows<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, so 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, so 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... Perhaps 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 = href=3D"http://john-raffensperger.blogspot.fr/2015/05/drag-your-graphviz-n= odes-with-inkscape.html" = class=3D"">http://john-raffensperger.blogspot.fr/2015/05/drag-your-graphvi= z-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"">http://tavmjong.free.fr/SVG/CONNECTORS/index.xhtml 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. I 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 = http://www.graphviz.org/MailingList.php<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"">[email protected]<br = class=3D"">http://lists.research.att.com/mailman/listinfo/graphviz-interes= t<br = class=3D""></blockquote>_______________________________________________<br= class=3D""><a href=3D"mailto:[email protected]" = class=3D"">[email protected]</a><br = class=3D"">http://lists.research.att.com/mailman/listinfo/graphviz-interes= t<br class=3D""></blockquote><br class=3D""></blockquote><br = class=3D""></div></blockquote></div><br = class=3D""></div></div></body></html>= --Apple-Mail=_C70CB51A-6F43-47E8-A6D0-536D26AB5D5E-- --===============6285082465305887451== 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 --===============6285082465305887451==--