How to use a dotted / dashed lines?

[DF]

I want to use solid lines to connect most of my lables, however there
are a few labels I'd like to use a dotted or dashed line to connect.

I checked the documents page (http://thejit.org/docs/files/Spacetree-
js.html), but did not see anything that indicated a way for me to use
a dotted/dashed/broken line.

Is there a way?

[Jan Ludewig]

On Mon, Feb 1, 2010 at 8:06 PM, DF <Dale.F...@us.tel.com> wrote:
> I want to use solid lines to connect most of my lables, however there
> are a few labels I'd like to use a dotted or dashed line to connect.

> Is there a way?

Unless the canvas' 2D-API supports this explicitly (afaik not and could not find
anything in a quick check), you can only implement your own renderer:
http://thejit.org/docs/files/Spacetree-js.html#ST.Plot.EdgeTypes

If memory serves me correctly, plotting edges works just like nodes :
With an implementation of a edge type 'dashed', all edges with
.data.$type == 'dashed'
will be rendered by that implementation.

jl

[DF]

Jan,

Thanks for the quick reply.

So, would something like this work?

I assume my edges are solid unless the value of .field5 is
"Dashed"...

Edge: {
type: 'bezier',
overridable: true

//assign a dashed line instead of a solid line based on the
value of field5
if (node.data.field5 == "Dashed") {
.data.$type == 'dashed' }
},

Thanks again,
DF

On Feb 1, 1:25 pm, Jan Ludewig <googol.ple...@gmail.com> wrote:

[Jan Ludewig]

On Mon, Feb 1, 2010 at 8:42 PM, DF <Dale.F...@us.tel.com> wrote:
>   So, would something like this work?

> [ your example ]
Since your example was not valid js-code, I can only guess how you
were trying to do that:
No, you have to set the type of the edge in your json or, after reading the
json, you have to set the type directly in the edge.
See http://thejit.org/docs/files/Loader-js.html#Loader.loadJSON for an
explanation how
to do the first one, or use the Graph.Util to iterate over the
adjacencies after loading:
http://thejit.org/docs/files/Graph-js.html#Graph.Util.eachAdjacency

And finally, you still have to implement your renderer =)

jl

[DF]

I'm still having trouble getting my spacetree to display dotted lines.

Does anyone have a working example that I can examine and dissect?

[DF]

bump...

[DF]

With regards to spacetrees, I'm still very interested in figuring out
how to implement a dotted or dashed line to connect certain nodes
with, while using solid lines to connect the rest.

I'd like to use a node.data field value to define when a dotted/dashed
line should be used.

Has anyone figured out how to implement a dotted/dashed line?

If so, can you post some sample code?

Thanks!

--
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.

[grafuls]

Hi DF!

I made a render for dashed lines but it will only work on straight
lines (horiz. or vert.). You can implement this by adding it to the
jit.js.

'dashed': function(adj, canvas) {
var data = adj.data, econfig = this.edge;
var orn = this.getOrientation(adj);
var nodeFrom = adj.nodeFrom, nodeTo = adj.nodeTo;
var begin = this.viz.geom.getEdge(nodeFrom._depth <
nodeTo._depth?
nodeFrom:nodeTo, 'begin', orn);
var end = this.viz.geom.getEdge(nodeFrom._depth <
nodeTo._depth?
nodeTo:nodeFrom, 'end', orn);
var cond = econfig.overridable && data;
var dim = cond && data.$dim || econfig.dim;
var dim = 5;
switch(orn) {
case "left":
canvas.path('stroke', function(ctx) {
for (i=begin.x;i<=end.x;i=i+(dim*2)){
ctx.moveTo(i, begin.y);
ctx.lineTo(i + dim, begin.y);
}
});
break;

case "right":
canvas.path('stroke', function(ctx) {
for (i=begin.x;i>=end.x;i=i-(dim*2)){
ctx.moveTo(i, begin.y);
ctx.lineTo(i - dim, begin.y);
}
});
break;

case "top":
canvas.path('stroke', function(ctx) {
for (i=begin.y;i<=end.y;i=i+(dim*2)){
ctx.moveTo(begin.x, i);
ctx.lineTo(begin.x, i + dim);
}
});
break;

case "bottom":
canvas.path('stroke', function(ctx) {
for (i=begin.y;i>=end.y;i=i-(dim*2)){
ctx.moveTo(begin.x, i);
ctx.lineTo(begin.x, i - dim);
}
});
break;
}
},

Hope this helps, let me now if you find a way to modify this so it can
work on any direction!

BR!
Gonz.-

On Apr 23, 9:44 am, DF <Dale.Fram...@us.tel.com> wrote:
> With regards to spacetrees, I'm still very interested in figuring out
> how to implement a dotted or dashed line to connect certain nodes
> with, while using solid lines to connect the rest.
>
> I'd like to use a node.data field value to define when a dotted/dashed
> line should be used.
>
> Has anyone figured out how to implement a dotted/dashed line?
>
> If so, can you post some sample code?
>
> Thanks!
>
> --

> You received this message because you are subscribed to the Google Groups "JavaScript Information Visualization Toolkit" group.To post to this group, send email tojavascript-informatio...@googlegroups.com.To unsubscribe from this group, send email tojavascript-information-visu...@googlegroups.com.
> For more options, visit this group athttp://groups.google.com/group/javascript-information-visualization-t....