Визуализация макета сети Protovis на Google Maps - PullRequest
Новая
       45

Визуализация макета сети Protovis на Google Maps

2 голосов
/ 04 января 2012

В настоящее время у меня есть куча точек, нарисованных с помощью Protovis поверх Google Maps с использованием API. Это выглядит так: http://mbostock.github.com/protovis/ex/oakland.html

Но я не просто хочу точки - я хочу, чтобы линии, соединяющие точки, отображали сеть. Я подумал, что мог бы использовать сетевой макет Protovis (pv.Layout.Network) в Картах Google, используя свойства nodes и links и классы pv.Dot и pv.Line. Узлы отображаются на моей карте, но не ссылки. Два других пользователя уже задавали подобные вопросы в дискуссионной группе 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, который использует сетевой макет: 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}
]
};

1 Ответ

2 голосов
/ 07 января 2012

Проблема в том, что вам нужно переопределить 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/ - она ​​не использует карту, а просто интерпретирует широту / долготу как значения пикселей, но может быть полезна в качестве доказательства концепции.

...