2

我目前使用 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}
]
};
4

1 回答 1

2

问题是您需要重新定义链接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/ - 它不使用地图，只是将纬度/经度解释为像素值，但作为概念证明可能会有所帮助。

于 2012-01-06T23:28:38.160 回答