Question

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

Answer 1

在获取数据之前，当前正在调用

vis.render()。可能还有其他问题，但需要在getNet()之后。

编辑1：

vis.render()现在在getNet()之后。我将protovis force布局创建代码放在一个函数中，以便我可以控制它何时执行，并使vis和followers变量对初始化代码和createLayout都可见代码。

Protovis，尤其是力量布局，对错误非常无情 - 例如错误的结构或节点/链接数据结构的元素数，并没有告诉你发生了什么，所以在开发它时最好首先使用你知道的正确类型的静态数据，然后用动态创建的数据替换

您遇到的问题的一部分是使用type="text/javascript+protovis" 调用protovis的javascript重写。以下代码使用type="text/javascript"，并具有使用{}保存的额外return和+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调试代码。

Answer 2

出色的工作詹姆斯 - 只有一件事需要注意：如果你保留createLayout();在jQuery $(document).ready()函数中调用你可能会发现你的面板出现在错误的位置...如果你想让面板出现在你的脚本所在的div中，删除jQuery refs并且一切都应该没问题。

修改在我写这篇文章的时候，我并没有意识到Protovis中的canvas参数 - 只需在面板中添加canvas divid，加上一个带有该id的div，就完全可以解决定位问题。

通过JQuery使用带有动态加载数据的Protovis

2 个答案: