GoogleマップでのProtovisネットワークレイアウトの可視化

Question

私は現在、APIを使用してGoogleマップの上にProtovisで描かれたたくさんの点を持っています。 http://mbostock.github.com/protovis/ex/oakland.html

しかし、私は点を望んでいません - 私は点を結んでいる線がネットワークを見せたいと思っています。私はnodesとlinksのプロパティとpv.Dotクラスとpv.Lineクラスを使用して、Google MapsでProtovisネットワークレイアウト（pv.Layout.Network）を使用できると考えました。ノードはマップに表示されますが、リンクには表示されません。 Protovisのディスカッショングループですでに2人のユーザーが同様の質問をしていますが、誰も答えていません。それは簡単なように思える。

私のコードは、基本的には上記オークランド犯罪スポッティングの例と同じですが、私はこれに、コードの「可視化をレンダリング」の部分を変更：これは、ネットワークを追加する部分である

p = new pv.Panel() 
    .canvas(c) 
    .left(-x.min) 
    .top(-y.min); 

var pn = p.add(pv.Layout.Network) 
    .nodes(this.exampleNetwork.nodes) 
    .links(this.exampleNetwork.links); 

pn.link.add(pv.Line) 

pn.node.add(pv.Dot) 
    .left(function() pixels[this.index].x) 
    .top(function() pixels[this.index].y) 

p.render(); 

視覚化へのレイアウト。繰り返しますが、ノードは正常に動作していますが、リンクは表示されません。私は助けていただければ幸いです！

アップデート：ネットワークレイアウト：http://mbostock.github.com/protovis/ex/force.htmlを使用するProtovisのForce-Directed Layoutの例を示します。そして、はい、私はProtovisは少し古いです知っています。

var exampleNetwork = { 
nodes:[ 
    { 
     nodeName : "Example1", 
     nodeValue : 100, 
     group : 0, 
     lat : 40.726446, 
     lon : -74.007339 
    }, 
    { 
     nodeName : "Example2", 
     nodeValue : 2048, 
     group : 0, 
     lat : 34.073137, 
     lon : -118.248596 
    } 
], 
    links:[ 
{source:0, target:1, value:5} 
] 
}; 

Answer 1

問題は、あなたがリンクのためだけでなく、ノードに対してtopとleftを再定義する必要があるということです：

pn.link.add(pv.Line) 
    .left(function() pixels[this.index].x) 
    .top(function() pixels[this.index].y); 

pn.node.add(pv.Dot) 
    .left(function() pixels[this.index].x) 
    .top(function() pixels[this.index].y); 

ここ

は私のデータがどのように見えるかの例です。 。pixels[this.index]が問題なく動作するかどうかはわかりませんが、代わりにこの方法を試してみてください。

pn.link.add(pv.Line) 
    .left(function(d) pixels[d.index].x) 
    .top(function(d) pixels[d.index].y); 

pn.node.add(pv.Dot) 
    .left(function(d) pixels[d.index].x) 
    .top(function(d) pixels[d.index].y); 

か、あなたはもう少し簡潔にしたい場合：いずれの場合で

var x = function(d) pixels[d.index].x, 
    y = function(d) pixels[d.index].y; 

pn.link.add(pv.Line) 
    .left(x) 
    .top(y); 

pn.node.add(pv.Dot) 
    .left(x) 
    .top(y); 

、あなたが見ることができるように、問題は、（データが特定のフォーマットを持っていることを、デフォルトでは、linkマークが期待していることです{ x: <x-value>, y: <y-value>}）のように、nodeマークと違い、データの設定が異なることを伝える必要があります。

私はここに簡単なフィドルを入れます：http://jsfiddle.net/nrabinowitz/NY7G3/ - マップを使用せず、ちょうどlat/lonをピクセル値として解釈しますが、概念の証明として役立ちます。