我正在动态地将一些社交网络数据加载到我想要使用protovis进行可视化的网页中.(实际上,数据是在两遍过程中加载的 - 首先是从Twitter获取用户名列表,然后是社交列表连接是从Google Social API中获取的.)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>
vis.render()在获取数据之前,当前正在调用.可能还有其他问题,但需要追问getNet().
编辑1:
vis.render()现在是getNet().我将protovis force layout创建代码放在一个函数中,这样我就可以控制它何时执行,并使vis和followers变量对初始化代码和createLayout代码都可见.
Protovis,特别是力布局,对错误非常无情 - 例如错误的结构或节点/链接数据结构的元素数量,并没有告诉你发生了什么,所以在开发中最好首先使用你知道的静态数据是正确的类型,然后用动态创建的数据替换.
你遇到的问题的一部分是使用type="text/javascript+protovis"
protovis调用javascript重写.下面的代码使用type="text/javascript"并具有使用保存的额外{}s和returns +protovis.这允许getJSON()和protovis在Chrome浏览器中共存,而不会getNet()被重复调用.
<html><head><title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="protovis-d3.2.js"></script>
<body>
<div id="center"><div id="fig">
<script type="text/javascript">
var vis;
var followers={};
function createLayout(){
var w = document.body.clientWidth,
h = document.body.clientHeight,
colors = pv.Colors.category19();
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){ return (d.linkDegree + 4) * Math.pow(this.scale, -1.5);})
.fillStyle(function(d){ return d.fix ? "brown" : colors(d.group);})
.strokeStyle(function(){ return this.fillStyle().darker();})
.lineWidth(1)
.title(function(d){return 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();
}
function getNet(){
// OK to have a getJSON function here.
followers={nodes:[{nodeName:'mweller', group:6},
{nodeName:'mhawksey', group:6},
{nodeName:'garethm', group:6},
{nodeName:'gconole', group:6},
{nodeName:'ambrouk', group:6}
],
links:[
{source:0, target:1, value:1},
{source:1, target:2, value:1},
{source:1, target:4, value:1},
{source:2, target:3, value:1},
{source:2, target:4, value:1},
{source:3, target:4, value:1}]};
}
$(document).ready(function() {
getNet();
createLayout();
})
</script>
</head>
</div></div>
</body></html>
编辑2:
如果你有兴趣深入挖掘,问题来自于protovis中的这段代码:
pv.listen(window, "load", function() {
pv.$ = {i:0, x:document.getElementsByTagName("script")};
for (; pv.$.i < pv.$.x.length; pv.$.i++) {
pv.$.s = pv.$.x[pv.$.i];
if (pv.$.s.type == "text/javascript+protovis") {
try {
window.eval(pv.parse(pv.$.s.text));
} catch (e) {
pv.error(e);
}
}
}
delete pv.$;
});
我以前使用"text/javascript"并避免使用"text/javascript+protovis"这两种技术可以解决您的问题,并且可以更容易地在Firefox中使用protovis调试代码.