2012-04-26 9 views
1

J'adore le nouveau plugin fisheye (http://bost.ocks.org/mike/fisheye/) mais je veux le faire fonctionner sur un graphique de force qui utilise des chemins et des marqueurs plutôt que des lignes. Je suis nouveau à D3 et jusqu'à présent, combinant la démo des marqueurs, avec la démo fisheye m'a vaincu, je me demandais si quelqu'un avait réussi et pourrait me diriger dans la bonne direction.D3 fisheye sur un graphique de force avec des marqueurs

Vive Ben

+0

Avez-vous – dsummersl

+0

Oui: utilisé des chemins au lieu des bords, puis mis à jour la fonction œil de poisson de sorte que la longueur de la ligne a pris en compte l'évolution de la taille des nœuds, voir ma réponse ci-dessous. – bentwonk

Répondre

1

vis.on ("mousemove", function() { if (rmbMenuHidden) { fisheye.center (d3.mouse (this));

 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; 
     }); 
    } 
} 
Questions connexes