texte dynamique et liens avec jCanvas

Question

J'ai une toile et j'utilise jCanva (http://calebevans.me/projects/jcanvas/docs.php?p=layers)s pour créer des cercles avec des événements. Je souhaite que chaque cercle contienne du texte (pour l'événement mouseover) et id (pour l'événement click). Le problème est que les événements sont dynamiques, et le «i» est toujours le dernier i (data.length) de sorte que tous les cercles obtiennent les mêmes valeurs ... Comment puis-je le résoudre?

for (i = 0; i < data.length; i++) { 
       var id = data[i][0]; 
       var text = data[i][2]; 

       $("#mapCanvas").drawArc({ 
        layer: true, 
        fillStyle: "yellow", 
        strokeStyle: "#000", 
        strokeWidth: 1, 
        x: Math.random() * c.clientWidth, 
        y: Math.random() * c.clientHeight, 
        radius: 6, 
        click: function (layer) { 
         window.open("Edit/" + id); 
        }, 
        mouseover: function (layer) { 
         $("canvas") 
         .addLayer({ 
          method: "drawRect", 
          name: "BackgroundLabel", 
          group: "ItemLabel", 
          fillStyle: "#FFFFD4", 
          x: layer.x + 10, 
          y: layer.y - 15, 
          width: 100, 
          height: 20 
         }) 
         .drawLayers(); 

         $("#mapCanvas").drawText({ 
         layer: true, 
         fillStyle: "white", 
         strokeWidth: 0, 
         x: layer.x + 10, 
         y: layer.y - 10, 
         font: "14pt Arial, Verdana, sans-serif", 
         text: text 
         }); 
        } 
       }); 

Answer 1

Je l'ai fixé - j'ai créé une fonction sepereate « drawOneCircle » qui obtient les vars et les utiliser. "drawOneCircle" contient maintenant le contenu de la boucle "for" d'origine.

  for (i = 0; i < data.length; i++) { 
       var id = data[i][0]; 
       var text = data[i][2]; 
       drawOneCircle(c, id, text); 
      } 

Answer 2

Je sais que ce n'est pas exactement ce que vous avez demandé, mais vérifier cette bibliothèque - http://d3js.org/ son impressionnant pour créer des données et des documents conduit pour rendre votre travail beaucoup plus facile. et je pense que l'utilisation de svg vous donnera de meilleures performances, puis en utilisant le canevas.

Answer 3

@TamarG: pour comprendre pourquoi votre "i" est toujours le dernier i (data.length), je recommande fortement un livre intitulé "Async JavaScript" de Trevor Burnham. J'ai programmé dans beaucoup de langues, et j'ai pensé que je connaissais JavaScript jusqu'à ce que je lise ce livre. La gestion des événements JavaScript n'est pas intuitive: les événements sont gérés contrairement à tout autre langage que j'ai utilisé. Je n'ai pas compris avant de lire ce livre.