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>}），就像{{1}一样} mark，你需要告诉它你的数据设置不同。

我在这里放了一个简单的小提琴：http://jsfiddle.net/nrabinowitz/NY7G3/ - 它不使用地图，只是将纬度/经度解释为像素值，但可能有助于作为概念证明。

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

1 个答案: