在谷歌地图上可视化Protovis网络布局

Question

我目前在使用API的谷歌地图上用Protovis绘制了一堆点。它看起来像这样:http://mbostock.github.com/protovis/ex/oakland.html

但我不只是想要点——我想要线连接点来显示一个网络。我想我可以使用谷歌地图上的Protovis网络布局(pv.Layout.Network)使用nodes和links属性和pv。点导和pv。线类。我的地图上显示了节点，但没有链接。另外两个用户已经在Protovis讨论组问了类似的问题，但是没有人回答。看起来应该很简单。

我的代码基本上与上面的Oakland Crime-spotting示例相同，但我将代码的"Render the visualization"部分更改为:

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

这是将Network Layout添加到可视化中的部分。同样，节点工作正常，但链接没有显示出来。我很感激任何帮助!

更新:这是一个在Protovis中强制定向布局的例子，它使用网络布局: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/-它不使用地图，只是将纬度/经线解释为像素值，但可能有助于作为概念证明。