プロトビスを使用して視覚化するWebページにソーシャルネットワークデータを動的にロードしています(実際には、データは2パスプロセスでロードされます-最初にユーザー名のリストがTwitterから取得され、次にソーシャルのリストが取得されます接続はGoogleSocialAPIから取得されます。)protovisコードはイベントループ内で実行されているようです。つまり、データ読み込みコードはこのループの外にある必要があります。
protovisイベントループを「スイッチオン」する前に、データをページにロードして解析するにはどうすればよいですか?現時点では、protovisがまだロードおよび解析されていないネットワークデータを視覚化しようとする競合状態があると思いますか?
<html><head><title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="../protovis-3.2/protovis-r3.2.js"></script>
<script type="text/javascript">
//getNet is where we get a list of Twitter usernames
function getNet(){
url="http://search.twitter.com/search.json?q=jisc11&callback=?"
$.getJSON(url,function(json){
users=[]
uniqusers={}
for (var u in json['results']) {
uniqusers[json['results'][u]['from_user']]=1
}
for (var uu in uniqusers)
users.push(uu)
getConnections(users)
})
}
//getConnections is where we find the connections between the users identified by the list of Twitter usernames
function getConnections(users){
//Google social API limits lookup to 50 URLs; need to page this...
if (users.length>50)
users=users.slice(0,49)
str=''
for (var uic=0; uic<users.length; uic++)
str+='http://twitter.com/'+users[uic]+','
url='http://socialgraph.apis.google.com/lookup?q='+str+'&edo=1&callback=?';
$.getJSON(url,function(json){
graph={}
graph['nodes']=[]
userLoc={}
for (var uic=0; uic<users.length; uic++){
graph['nodes'].push({nodeName:users[uic]})
userLoc[users[uic]]=uic
}
graph['links']=[]
for (u in json['nodes']) {
name=u.replace('http://twitter.com/','')
for (var i in json['nodes'][u]['nodes_referenced']){
si=i.replace('http://twitter.com/','')
if ( si in userLoc ){
if (json['nodes'][u]['nodes_referenced'][i]['types'][0]=='contact')
graph['links'].push({source:userLoc[name], target:userLoc[si]})
}
}
}
followers={}
followers={nodes:graph['nodes'],links:graph['links']}
});
}
$(document).ready(function() {
users=['psychemedia','mweller','mhawksey','garethm','gconole','ambrouk']
//getConnections(users)
getNet()
})
</script>
</head>
<body>
<div id="center"><div id="fig">
<script type="text/javascript+protovis">
// This code is taken directly from the protovis example
var w = document.body.clientWidth,
h = document.body.clientHeight,
colors = pv.Colors.category19();
var vis = new pv.Panel()
.width(w)
.height(h)
.fillStyle("white")
.event("mousedown", pv.Behavior.pan())
.event("mousewheel", pv.Behavior.zoom());
var force = vis.add(pv.Layout.Force)
.nodes(followers.nodes)
.links(followers.links);
force.link.add(pv.Line);
force.node.add(pv.Dot)
.size(function(d) (d.linkDegree + 4) * Math.pow(this.scale, -1.5))
.fillStyle(function(d) d.fix ? "brown" : colors(d.group))
.strokeStyle(function() this.fillStyle().darker())
.lineWidth(1)
.title(function(d) d.nodeName)
.event("mousedown", pv.Behavior.drag())
.event("drag", force)
//comment out the next line to remove labels
//.anchor("center").add(pv.Label).textAlign("center").text(function(n) n.nodeName)
vis.render();
</script>
</div></div>
</body></html>