5

我正在将一些社交网络数据动态加载到我想使用 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>
4

2 回答 2

5

vis.render()在您获取数据之前当前正在调用。可能还有其他问题，但它需要在getNet().

编辑1：

vis.render()现在是后getNet()。我已将 protovis 强制布局创建代码放在一个函数中，以便我可以控制它何时执行，并使初始化代码和代码都可以看到visand变量。followerscreateLayout

Protovis，尤其是力布局，对错误非常宽容 - 例如节点/链接数据结构的错误结构或元素计数，并且不会告诉您发生了什么，因此在开发时最好首先使用您知道的静态数据是正确的类型，然后用动态创建的数据替换。

您遇到的问题之一是 usingtype="text/javascript+protovis" 调用由 protovis 重写的 javascript。下面的代码使用type="text/javascript"并具有额外{}的 s 和returnusing+protovis保存的 s。这允许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 调试代码变得更加容易。

于 2011-03-14T18:02:44.667 回答
0

詹姆斯干得好——只有一件事需要注意：如果你保留createLayout(); 在 jQuery$(document).ready()函数中调用，您可能会发现您的面板出现在错误的位置...如果您希望面板出现在您的脚本所在的 div 中，请删除 jQuery 引用，一切都应该没问题。

编辑： 在我写这篇文章的时候，我不知道 Protovis 中的 canvas 参数 - 只需将 canvas 添加divid到面板，加上一个具有该 id 的 div，就可以完全解决定位问题。

于 2011-04-18T11:54:29.897 回答