Flare 的 Edge边上加 Label

2009-07-23 10:36:46 UTC

I have started using flare to visualize a simple graphs with nodes and edges - similar to the demo (layouts/tree).

This simple code displays the tree structure but with any labels. I want to use the node name from the graphml file as the node name

Can anyone help me

thanks

MrC

public function Tutorial()
{
loadData();
}

private function loadData():void
{


var ds:DataSource = new DataSource(" http://localhost/deps-gml.xml", "graphml");

var loader:URLLoader = ds.load();
loader.addEventListener(Event.COMPLETE, function(evt:Event):void {
var ds:DataSet = loader.data as DataSet;
visualize(Data.fromDataSet(ds));
});
}
private function visualize(data:Data):void
{


var fmt:TextFormat = new TextFormat();
fmt.font = "Arial";
fmt.size = 19;
fmt.bold = false;


vis = new Visualization(data);
vis.bounds = new Rectangle(0,0,600,500);

vis.x = 100;
vis.y = 50
addChild(vis);

var lan:Labeler = new Labeler("data.nodes.name",Data.NODES,fmt);
vis.operators.add(lan);
vis.operators.add(new NodeLinkTreeLayout("topToBottom",5,5,10));


vis.update();


}

goosebumps4all

2009-07-23 12:20:00 UTC

I guess

var lan:Labeler = new Labeler("data.nodes.name",Data.NODES,fmt);

should be

var lan:Labeler = new Labeler("data.name",Data.NODES,fmt);

hope that is it

cheers

martin

cortinas

2009-07-23 12:39:21 UTC

thanks. I added the following and now I have labels....

vis.data.nodes.visit(function(ns:NodeSprite):void {
ns.data.label = ns.data.id;
});

var lan:Labeler = new Labeler("data.label",Data.NODES,fmt);
vis.operators.add(lan);

pall213

2009-07-30 13:58:14 UTC

Hello all, just another similar question.

What if I want to reach the value of the node? For example, there is a node like:
...
<node id="node1">somevalue</node>
...
and I want to use that 'somevalue' as the label. How can I do that? And also how can I reach that value directly and assign it to a variable?

I know these are probably very basic things for you, sorry.

storycreator1

2009-07-30 14:32:35 UTC

In the graphML format you have to write the value in a new sub-tag:

<node id="dm">
<data key="value">50.0</data>
</node>

and before the <graph> tag you need to define this key
<key id="value" for="node" attr.name="yournamehere" attr.type="double"/>

(Of course you can use other names for the id than "value".)

Now you can access the value in flare with "data.yournamehere".

pall213

2009-07-31 05:55:04 UTC

Ok, thank you for the answer. So I can use that "data.yournamehere" as a parameter to Labeler and it'll work.

But I still don't know how to assign that value to a variable, anyone can help? In other words,

var s:String = what to write here?

goosebumps4all

2009-07-31 09:17:08 UTC

var s:String = aNodeSprite.data.yournamehere;

where aNodeSprite is the NodeSprite instance holding that value;

pall213

2009-07-31 09:45:08 UTC

Thank you very much, it works perfectly.

pall213

2009-08-04 11:02:53 UTC

Ok so, I can use the key "name" in the data as the label for the node by:

var lan:Labeler = new Labeler("data.name",Data.NODES,fmt);

but what if I have another key (say "type") that I also want to show it in the label with the "name"? (so the label will look like "examplename, exampletype") Is there any way to do this with the Labeler? Or should I just add a TextField to each node and write whatever I want to them?

goosebumps4all

2009-08-04 12:59:51 UTC

http://flare.prefuse.org/api/flare/vis/operator/label/Labeler.html#Labeler()

pall213

2009-08-04 14:27:04 UTC

Ok, thank you. So I can use a function to determine the label. Another question though, is it possible to use more than one labelers for a node? If so, how?

goosebumps4all

2009-08-04 16:17:31 UTC

well i would suggest adding two Labelers to the operator list and letting us know how it goes

pall213

2009-08-05 06:43:36 UTC

Well I tried adding two labelers but it doesn't seem to be working. The second one is always ignored. I also tried changing yOffset and verticalAnchor values. Any ideas?

goosebumps4all

2009-08-05 08:00:48 UTC

Surprising, yet looking into the class revealed that it is due to fact how the Labelers class stores the textfied, which is per default in aNodeSprite.props.label

Luckily this default flied can be customized, so far your second labeler you might do something like

labeler2.access = "props.label2";

and work with this field for the case you do extra customizations for the texfield

hope that helps

martin

pall213

2009-08-05 12:26:17 UTC

great. thank you very much.

amit4767

2009-08-22 10:47:23 UTC

First of all i would like say thanks to all for helping me in giving label to node. specially
cortinas (cortinas) - 2009-07-23 16:06.
Can anybody please tell how can i give label to edge between two nodes.

amit4767

2009-08-22 10:54:31 UTC

vis.data.edges.visit(function(ns:NodeSprite):void {

if(ns.data.label == "3"){

ns.data.label = "asd";
}else{

ns.data.label ="amit";
}

});

var lan1:Labeler = new Labeler("data.label",Data.EDGES,fmt);
//vis.operators.add(lan);
vis.operators.add(lan1);
vis.operators.add(opt[idx].op);
vis.setOperator("nodes", new PropertyEncoder(opt[idx].nodes, "nodes"));
vis.setOperator("edges", new PropertyEncoder(opt[idx].edges, "edges"));


I have tried same like in node but it showing nothing in the output

amit4767

2009-08-22 12:26:12 UTC

hehe :) thnks alot guy i got the answer


var mm:int = 0;
vis.data.edges.visit(function(es:EdgeSprite):void {
es.data.label = "Edge " + mm++;
});
vis.data.edges.visit(function(es:EdgeSprite):void {
es.addEventListener(Event.RENDER,updateEdgeLabelPosition);
});
var lae:Labeler = new Labeler("data.label",Data.EDGES,fmt,EdgeSprite,Labeler.LAYER);
//var lan1:Labeler = new Labeler("data.label",Data.EDGES,fmt);
vis.operators.add(lan);