2012-04-26 2 views
1

Мне нравится новый плагин fisheye (http://bost.ocks.org/mike/fisheye/), но хочу, чтобы он работал над графиком силы, который использует дорожки и маркеры, а чем линии. Я новичок в D3 и до сих пор совмещаю демоверсию маркеров, и демоверсия fisheye побеждала меня, я задавался вопросом, был ли кто-то успешным и мог указать мне в правильном направлении.D3 fisheye на графике силы с маркерами

Приветствия Бен

+0

ли вам выяснить, как это сделать? – dsummersl

+0

Да: используемые пути вместо ребер, а затем обновили функцию рыбьего глаза, чтобы длина линии учитывала меняющийся размер узлов, см. мой ответ ниже. – bentwonk

ответ

1

vis.on ("MouseMove", функция() { если (rmbMenuHidden) { fisheye.center (d3.mouse (это));

 node 
      .each(function(d) { d.display = fisheye(d); }) 
      .attr("cx", function(d) { return d.display.x; }) 
      .attr("cy", function(d) { return d.display.y; }) 
      .attr("r", function(d) { d.display.r=d.display.z * 10; return d.display.r;}); 

     path.attr("d", function(d) { 

      var dx = d.t.display.x - d.s.display.x; 
      var dy = d.t.display.y - d.s.display.y; 

      var h= Math.sqrt(dx * dx + dy * dy); 
      var htr = h-d.t.display.r-d.edgeWidth-1; 
      var cos=dx/h; 
      var sin=dy/h; 

      var dxt = cos*htr+d.s.display.x; 
      var dyt = sin*htr+d.s.display.y; 

      //clip source to circle radius too 
      var dxs = cos*d.s.display.r+d.s.display.x; 
      var dys = sin*d.s.display.r+d.s.display.y; 

       var dx = d.t.display.x - d.s.display.x, 
       dy = d.t.display.y - d.s.display.y; 
       dr = Math.sqrt(dx * dx + dy * dy); 
       return "M" + d.s.display.x + "," + d.s.display.y + "A" + dr + "," + dr + " 0 0,1 " + dxt + "," + dyt; 
     }); 
    } 
}