Rendering straight "orthogonal" edges

[Frans Twisk]

Hello, I was wondering if there is any way to render the edges between
the nodes straight with a sharp corner instead of a bezier one.
Something like this: http://cl.ly/08de35077e71364fce8a

Would love to see this is an option for I believe it is a better
representation then the current options.

[Nico Garcia Belmonte]

I believe that type of edge rendering function was contributed to the toolkit previously, please double check for an entry in this google group where you could find that as an edge rendering function.

I would also be very happy if someone would implement that as an edge rendering function for the Spacetree ;)

If you want to know more about implementing edge rendering functions please see this entry:

http://thejit.org/docs/files/Spacetree-js.html#ST.Plot.EdgeTypes

--
You received this message because you are subscribed to the Google Groups "JavaScript Information Visualization Toolkit" group.
To post to this group, send email to javascript-information...@googlegroups.com.
To unsubscribe from this group, send email to javascript-information-visua...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/javascript-information-visualization-toolkit?hl=en.

--
I would never die for my beliefs because I might be wrong.

Bertrand Russell

[Frans Twisk]

Thanks, It's hard to find something if you don't have the right name
for it ;-)

I found a solution for a vertical spaceetree here:
http://groups.google.com/group/javascript-information-visualization-toolkit/browse_thread/thread/f21d93fc05634c5e/e91b32909817a38f?lnk=gst&q=EdgeTypes#e91b32909817a38f

The problem is now, how to make this work for a horizontal spacetree.
If anyone has a quick fix, let me know. I will try to get it fixed
with my small knowledge of canvas...

On Jun 7, 7:26 pm, Nico Garcia Belmonte <phil...@gmail.com> wrote:
> I believe that type of edge rendering function was contributed to the
> toolkit previously, please double check for an entry in this google group
> where you could find that as an edge rendering function.
>
> I would also be very happy if someone would implement that as an edge
> rendering function for the Spacetree ;)
>
> If you want to know more about implementing edge rendering functions please
> see this entry:
>
> http://thejit.org/docs/files/Spacetree-js.html#ST.Plot.EdgeTypes
>
>
>
>
>
> On Mon, Jun 7, 2010 at 3:13 PM, Frans Twisk <fr...@scissor.nl> wrote:
> > Hello, I was wondering if there is any way to render the edges between
> > the nodes straight with a sharp corner instead of a bezier one.
> > Something like this:http://cl.ly/08de35077e71364fce8a
>
> > Would love to see this is an option for I believe it is a better
> > representation then the current options.
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "JavaScript Information Visualization Toolkit" group.
> > To post to this group, send email to
> > javascript-information...@googlegroups.com.
> > To unsubscribe from this group, send email to

> > javascript-information-visua...@googlegroups.com<j avascript-information-visualization-toolkit%2Bunsu...@googlegroups.com>
> > .

> > For more options, visit this group at

> >http://groups.google.com/group/javascript-information-visualization-t...
> > .

[Frans Twisk]

Well that wasn't so hard :)

Here it is (only for horizontal spacetree, guess you can add the other
one if you want):

'orthogonal:horizontal': function(adj, canvas) {
var level_distance = this.viz.config.levelDistance,
orn = this.getOrientation(adj),
nodeFrom = adj.nodeFrom,
nodeTo = adj.nodeTo,
rel = nodeFrom._depth < nodeTo._depth,
begin = this.viz.geom.getEdge(rel? nodeFrom:nodeTo, 'begin',
orn),
end = this.viz.geom.getEdge(rel? nodeTo:nodeFrom, 'end', orn);

canvas.path('stroke', function(ctx) {
ctx.moveTo(begin.x, begin.y);
ctx.lineTo(end.x-level_distance/2, begin.y);
});
canvas.path('stroke', function(ctx) {
ctx.moveTo(end.x-level_distance/2, begin.y);
ctx.lineTo(end.x-level_distance/2, end.y);
});
canvas.path('stroke', function(ctx) {
ctx.moveTo(end.x-level_distance/2, end.y);
ctx.lineTo(end.x, end.y);
});
},

Thanks for the help! Getting the grips of this.

On Jun 8, 12:18 am, Frans Twisk <fr...@scissor.nl> wrote:
> Thanks, It's hard to find something if you don't have the right name
> for it ;-)
>

> I found a solution for a vertical spaceetree here:http://groups.google.com/group/javascript-information-visualization-t...

[Frans Twisk]

Actually this solution causes another problem since all the edges are
rendered on top of each other the first line is below the other ones.
When I render the selected node with it's line in a different color it
displayed like this:

http://cl.ly/d555d0d740477d74c32e

Any way to set the index for the selected line?

[Nico Garcia Belmonte]

Hi,

you can check if nodeFrom.selected and nodeTo.selected then draw the selected line.

if nodeFrom.selected and !nodeTo.selected then just draw the second half of the line.

if !nodeFrom.selected and !nodeTo.selected draw a simple line

To unsubscribe from this group, send email to javascript-information-visua...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/javascript-information-visualization-toolkit?hl=en.

[Frans Twisk]

That doesn't really ream to work, because there also has to be a line
between nodeFrom.selected to a !nodeTo.selected otherwise it would be
empty when only the first is selected:

http://cl.ly/fba2f1c5640b0881c6c1

> > javascript-information-visua...@googlegroups.com<j avascript-information-visualization-toolkit%2Bunsu...@googlegroups.com> <j
> > avascript-information-visualization-toolkit%2Bunsu...@googlegroups.com< avascript-information-visualization-toolkit%252Buns...@googlegroups.co m>

[Nico Garcia Belmonte]

I don't really understand what you mean, but in any case, you can count a node's children like this

var count = 0;

Graph.Util.eachSubnode(node, function(n) { if(n.drawn) count++; });

and workaround your special cases. BTW this is documented here: http://thejit.org/docs/files/Graph-js.html#Graph.Util.eachSubnode.

To unsubscribe from this group, send email to javascript-information-visua...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/javascript-information-visualization-toolkit?hl=en.