के माध्यम से गतिशील रूप से लोड किए गए डेटा के साथ प्रोटोविस का उपयोग करना मैं गतिशील रूप से कुछ सामाजिक नेटवर्क डेटा को एक वेब पेज में लोड कर रहा हूं जिसे मैं प्रोटॉविस का उपयोग करके देखना चाहता हूं। (वास्तव में, डेटा को दो पास प्रक्रिया में लोड किया जाता है - पहले उपयोगकर्ता की एक सूची ट्विटर से नाम पकड़े गए हैं, फिर Google सोशल एपीआई से सोशल कनेक्शन की एक सूची पकड़ी गई है।) प्रोटॉविस कोड एक इवेंट लूप के अंदर चल रहा है, जिसका मतलब है कि डाटा लोडिंग कोड को इस लूप के बाहर होना चाहिए।JQuery
प्रोटॉविस इवेंट लूप "स्विचिंग" करने से पहले, मैं पृष्ठ में डेटा कैसे लोड करूं और इसे पार्स कैसे करूं? फिलहाल, मुझे लगता है कि एक दौड़ की स्थिति है जिसके द्वारा प्रोटोविस नेटवर्क डेटा को विज़ुअलाइज़ करने का प्रयास करता है जिसे अभी तक लोड नहीं किया गया है और अभी तक पार्स नहीं किया गया है?
<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>
क्या मेरा अद्यतन उत्तर अब आपकी समस्या का समाधान करता है? –
मैंने ट्विटर और Google सोशल एपीआई के लिए जेम्स क्रूक के समाधान डब्ल्यू/JQuery बनाने के प्रश्नों का उपयोग करके एक डेमो ब्लॉग किया है, फिर परिणाम ग्राफिंग: blog.ouseful.info/2011/04/12/using-protovis-to-visualise-connections- बीच-लोग-ट्वीटिंग-ए-स्पेशल-टर्म/ – psychemedia