2

現在、API を使用して、Google マップの上に Protovis で描画された点がたくさんあります。次のようになります: http://mbostock.github.com/protovis/ex/oakland.html

しかし、点だけが欲しいのではなく、点と点を結ぶ線でネットワークを示したいのです。nodesプロパティと pv.Dotおよびlinkspv.Line クラスを使用して、Google マップで Protovis Network Layout (pv.Layout.Network) を使用できると考えました。ノードはマップに表示されますが、リンクは表示されません。他の 2 人のユーザーが既に 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}
]
};
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 に答える