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

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

Но мне нужны не просто точки — я хочу, чтобы линии, соединяющие точки, показывали сеть. Я подумал, что могу использовать сетевой макет Protovis (pv.Layout.Network) на Google Maps, используя свойства 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();

Это та часть, которая добавляет макет сети к визуализации. Опять же, узлы работают нормально, но ссылки не отображаются. Буду признателен за любую помощь!

Обновление: вот пример макета Force-Directed в 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}
]
};

google-maps networking visualization map protovis
person user1128675    schedule 03.01.2012    source источник
comment
Вы можете создать более простую версию кода? и/или настроить jsFiddle? Это очень трудно проверить. В качестве побочного эффекта я думаю, что protovis стал ненужным из-за d3.js.   -  person Nicolas78    schedule 04.01.2012
comment
Я не могу придумать более подходящего города, чем Окленд, для иллюстрации потоков преступности.   -  person This    schedule 04.01.2012

Ответы (1)


arrow_upward
2
arrow_downward

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

person nrabinowitz    schedule 06.01.2012
comment
Спасибо! Это решило проблему. - person user1128675; 08.02.2012