在谷歌地圖上可視化Protovis網絡佈局

Question

我目前在Google Maps上使用API​​在Protovis上繪製了一串點。它看起來像這樣：http://mbostock.github.com/protovis/ex/oakland.html

但我不只是想要點 - 我想要連接點的線條顯示網絡。我以爲我可以使用nodes和links屬性以及pv.Dot和pv.Line類在Google地圖上使用Protovis網絡佈局（pv.Layout.Network）。節點顯示在我的地圖上，但不是鏈接。其他兩位用戶已經在Protovis討論組上提出了類似的問題，但沒有人回答。它看起來應該很簡單。

我的代碼是基本上與上述相同的奧克蘭犯罪去斑例子，但我改變了代碼的「渲染可視化」部分這樣：

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(); 

這是增加了網絡的一部分可視化的佈局。同樣，節點工作正常，但鏈接不顯示。我會很感激任何幫助！

更新：以下是Protovis中使用網絡佈局的Force-Directed Layout的示例：http://mbostock.github.com/protovis/ex/force.html。是的，我知道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/ - 它不使用地圖，只是將緯度/經度解釋爲像素值，但可能有助於作爲概念驗證。