Alchemy onMouseOver不起作用

我正在與alchemy.js一起顯示圖表。問題是我無法顯示圖形節點的「onMouseOver」標題。在控制檯中有一些錯誤。這裏輸出：Alchemy onMouseOver不起作用

這裏的代碼：

<html> 
<head> 
    <link rel="stylesheet" href="../css/style.css"/> 
</head> 
<body class="ng-scope"> 
<div class="alchemy" id="alchemy" style="margin-left: 50% !important;"></div> 
<script src="../prova/vendor.js"></script> 

<script src="../prova/alchemy.min.js"></script> 

<script type="text/javascript"> 
    var config = { 
      // SOURCE GRAPH 
      dataSource: '../prova.json', 

     "nodeStyle":{ 
     "all":{ 
     "radius":10, 
     "color":"RED", 
      "borderColor":"none", 
     "captionColor":"#FFFFFF", 
     "captionBackground":null, 
     "captionSize":12, 
     "selected":{ 
      "color":"#FFFFFF" 

     }, 
     "highlighted":{ 
      "color":"#EEEEFF", 
      "borderColor":"none" 
     }, 
     "hidden":{ 
      "color":"none", 
      "borderColor":"none" 
     } 
     }, 
     "microRNA":{ 
      "radius":10, 
     "color":"#EF5350", 
      "borderColor":"none", 
     "captionColor":"#000000", 
     "captionBackground":null, 
     "captionSize":12, 
     "selected":{ 
      "color":"#000000", 
      "borderColor":"none" 
     }, 
     "highlighted":{ 
      "color":"#D50000" 
     }, 
     "hidden":{ 
      "color":"none", 
      "borderColor":"none" 
     } 

     }, 
      "Target":{ 
      "radius":10, 
     "color":"#2196F3", 
       "borderColor":"none", 
     "captionColor":"#000000", 
     "captionBackground":null, 
     "captionSize":12, 
     "selected":{ 
      "color":"#000000", 
      "borderColor":"none" 
     }, 
     "highlighted":{ 
      "color":"#1A237E" 
     }, 
     "hidden":{ 
      "color":"none", 
      "borderColor":"none" 
     } 
     }, 
     "person":{ 
      "radius":10, 
     "color":"#4CAF50", 
      "borderColor":"none", 
     "captionColor":"#000000", 
     "captionBackground":null, 
     "captionSize":12, 
     "selected":{ 
      "color":"#000000", 
      "borderColor":"none" 
     }, 
     "highlighted":{ 
      "color":"#1B5E20" 
     }, 
     "hidden":{ 
      "color":"none", 
      "borderColor":"none" 
     } 
     } 

    }, 


    nodeTypes: {"type": 
       ["movie", 
       "award", 
       "person"] 
       }, 

    rootNodeRadius: 30, 


    showControlDash: true, 
    showStats: true, 
    nodeStats: true, 
    showFilters: true, 
    nodeFilters: true, 

    captionToggle: true, 
    edgesToggle: true, 
    nodesToggle: true, 
    toggleRootNotes: false, 

    zoomControls: true, 

      //FORCE THINGS 
      forceLocked: true, 

      // DIRECTION OF THE EDGES 
      directedEdges: false, 

      // HOW TO VISUALIZE 

      //nodeCaption: function(node) { // TO PRINT MORE "THINGS" 
      // return ""+ node.type + " ("+ node.id+ ")" ; 
      //}, 


      //edgeCaption: 'target', 
      //nodeMouseOver: function(node) { 
      //return ""+node.type + node.id+""; 
      //} 

}; 

alchemy.begin(config); 

</script> 
</body> 
</html>

如果我註釋掉這個函數：

//nodeMouseOver: function(node) { 
    //return ""+node.type + node.id+""; 
//}

我有同樣的結果。有人知道我錯在哪裏嗎？

來源

2017-07-20 Andrea Perelli

我「解決」做的事情「不太好」（我的推杆HTML中的JavaScript）

<html> 
<head> 
    <title>Show Graph</title> 
    <link rel="stylesheet" href="../css/style.css"/> 
</head> 

<body class="ng-scope" ng-app="site"> 

<!-- DIV CHE CONTIENE IL RISULTATO DEL MOUSE OVER DEL NODO/ARCO--> 
<div id="info"> </div> 

<!-- DIV CHE CONTIENE LA BARRA DEL "NODE TYPE FILTER" --> 
<div id="legenda"> </div> 

<!-- DIV CHE STAMPA IL GRAFO--> 
<div class="alchemy" id="alchemy" style="margin-left: 50% !important;"></div> 

<!--DIPENDENZE ALCHEMY --> 
<script src="../js/vendor.js"></script> 

<!-- ALCHEMY--> 
<script src="../js/alchemy.min.js"></script> 

<!-- NOSTRA FUNZIONE--> 
<script type="text/javascript"> 
    // HTML CHE GENERA LA BARRA DEL "NODE TYPE FILTER" INIETTATO NEL DIV 
document.getElementById("legenda").innerHTML = "<div id='divisore'><img src='../rosso.png'> Target &nbsp;&nbsp;&nbsp;&nbsp;</img><img src='../blu.png'> microRNA &nbsp;&nbsp;&nbsp;&nbsp; </img><input id='inpuno' type='text' placeholder='node type filter'> <button type='submit' onclick=copyToTextarea(); id='pulsante'> Change </button><h5 id='istruzioni'>- Click and drag to move the graph</h5><h5 id='istruzioni' >- Slide with two fingers up and down to zoom in or zoom out the graph</h5></div> "; 

// NOSTRA VARIABILE DI CONFIGURAZIONE 

    var config = { 
     // file json da dove prendiamo i dati 
     dataSource: '../prova.json', 

     // stile dei nodi, 
     "nodeStyle": { 
      "all": { 
       "radius": 10, 
       "color": "GREEN", 
       "borderColor": "none", 
       "captionColor": "#FFFFFF", 
       "captionBackground": null, 
       "captionSize": 12, 
       "selected": { // se selezionato 
        "color": "#FFFFFF", 

       }, 
       "highlighted": { // mouse over 
        "color": "#EEEEFF", 
        "borderColor": "none" 
       }, 
       "hidden": { // nascosto 
        "color": "none", 
        "borderColor": "none" 
       } 
      }, 
      "Target": { 
       "radius": 15, 
       "color": "#EF5350", 
       "borderColor": "none", 
       "captionColor": "#000000", 
       "captionBackground": null, 
       "captionSize": 12, 
       "selected": { // se selezionato 
        "color": "#000000", 
        "borderColor": "none" 
       }, 
       "highlighted": { // mouse over 
        "color": "#D50000" 
       }, 
       "hidden": { // nascosto 
        "color": "none", 
        "borderColor": "none" 
       } 
      }, 
      "microRNA": { 
       "radius": 15, 
       "color": "#2196F3", 
       "borderColor": "none", 
       "captionColor": "#000000", 
       "captionBackground": null, 
       "captionSize": 12, 
       "selected": { // se selezionato 
        "color": "#000000", 
        "borderColor": "none" 
       }, 
       "highlighted": { // mouse over 
        "color": "#1a2691" 
       }, 
       "hidden": { // nascosto 
        "color": "none", 
        "borderColor": "none" 
       } 
      }, 

     }, 
     // filtro base sui nodi 
     nodeTypes: { 
      "type": ["microRNA", 
        "Target"] 
     }, 



     // radius del nodo root 
     rootNodeRadius: 30, 


     showControlDash: true, 
     showStats: true, 
     nodeStats: true, 


     showFilters: true, 
     nodeFilters: true, 
     edgeFilters: false, 

     captionToggle: true, 
     edgesToggle: true, 
     nodesToggle: true, 
     toggleRootNotes: false, 

     zoomControls: true, 

     // Definisce la distanza di zoom che l'utente sarà in grado di ingrandire e ridurre 
     scaleExtent:[9.9, 4.4], 

     // effetto grafico 
     forceLocked: true, 

     // archi diretti 
     directedEdges: false, 



     // possiamo settare l'attributo 
     nodeCaption: "id", 
     edgeCaption: "", 


     // FUNZIONE che stampa a video i dati dei nodi 
     // funziona anche con mouseover cambiando nodeClick con nodeMouseOver 
     "nodeClick": function (node) { 
      if(node._properties.type == "microRNA") { 
       document.getElementById("info").innerHTML = "<h2>Informazioni sul nodo microRNA selezionato</h2>" + "Id: " + node._properties.id + "<br>" + "Species: " + node._properties.species + "<br>" + "Name: " + node._properties.name + "<br>" + "Accession: " + node._properties.accession + "<br>" + "Mirbase_link: " + node._properties.mirbase_link + "<br><br>"; 

       return node._properties.type; 
      } 
      else{ 
       document.getElementById("info").innerHTML = "<h2>Informazioni sul nodo Target selezionato</h2>" + "Id: " + node._properties.id + "<br>" + "Species: " + node._properties.species + "<br>" + "Name: " + node._properties.name + "<br>" + "Geneid: " + node._properties.geneid + "<br>" + "ncbi_link: " + node._properties.ncbi_link+ "<br>" + "ens_code: " + node._properties.ens_code + "<br><br>"; 

       return node._properties.type; 
      } 
     }, 

     // FUNZIONE che stampa a video i dati degl'archi 

     "edgeClick": function (edge) { 

      document.getElementById("info").innerHTML = "<h2>Informazioni sull' arco selezionato</h2>" + "Source: " + edge._properties.source + "<br>" + "Targer: " + edge._properties.target + "<br>" + "Score: " + edge._properties.score + "<br>" + "source_microrna: " + edge._properties.source_microrna + "<br>" + "Name: " + edge._properties.name + "<br>" + "source_target: " + edge._properties.source_target + "<br><br>"; 

      return edge._properties.source; 
     }, 



    }; 

     alchemy.begin(config); 

    // funzione che copia il dall'input form e 
function copyToTextarea(){ 

     var a = document.getElementById("inpuno").value; 
     document.getElementById('li-microRNA').innerHTML= a; 
     document.getElementById('li-microRNA').id= "li-"+a; 
     document.getElementById('li-'+a).setAttribute("name",a); 
     // stat 
     document.getElementById('li-microRNA').innerHTML= a; 
     document.getElementById('li-microRNA').id= "li-"+a; 
            } 
</script> 

</body> 
</html>

我沒能解決不同的方式，因爲似乎鍊金術項目去世。謝謝。

來源

2017-07-24 17:14:48

Alchemy onMouseOver不起作用

回答

相關問題