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

Question

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

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

我的代码与上面的 Oakland Crime-spotting 示例基本相同，但我将代码的“渲染可视化”部分更改为：

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 中的强制导向布局示例，它使用网络布局：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/ - 它不使用地图，只是将纬度/经度解释为像素值，但作为概念证明可能会有所帮助。