5

プロトビスを使用して視覚化する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>
4

2 に答える 2

5

vis.render()現在、データを取得する前に呼び出されています。他の問題もあるかもしれませんが、それは後でなければなりませんgetNet()


編集1:

vis.render()今は後getNet()です。protovis forceレイアウト作成コードを関数内に配置して、いつ実行するかを制御できるようにし、変数visfollowers変数を初期化コードとコードの両方に表示できるようにしましたcreateLayout

Protovis、特に力のレイアウトは、エラーについて非常に寛容ではありません-たとえば、ノード/リンクのデータ構造の構造や要素の数が間違っていて、何が起こっているのかを教えてくれないので、開発では、最初に知っている静的データを使用するのが最善ですは適切な種類であり、後で動的に作成されたデータに置き換えます。

あなたが抱えていた問題の一部は、を使用するとtype="text/javascript+protovis" 、protovisによるjavascriptの書き換えが呼び出されることです。以下のコードは、 savesを使用type="text/javascript"する追加{}のsとreturnsを使用しています。+protovisこれによりgetJSON()、protovisは、getNet()繰り返し呼び出されることなく、Chromeブラウザで共存できます。

<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

素晴らしい仕事ジェームズ-注意すべきことは1つだけcreateLayout()です。jQuery$(document).ready()関数内で呼び出すと、パネルが間違った場所に表示される場合があります...スクリプトが含まれているdiv内にパネルを表示する場合は、jQuery参照を削除すれば問題ありません。

編集: これを書いた時点では、Protovisのcanvasパラメータを認識していませんでしdividた。パネルにcanvasを追加するだけで、そのIDを持つdivが、ポジショニングの問題を完全に処理します。

于 2011-04-18T11:54:29.897 に答える