Alchemy onMouseOver doesn't work
I'm working with alchemy.js to show a graph. The problem is that I can't display the "onMouseOver" caption of the graph's node. In the console there are some errors. Here output:
here the code:
<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>
if I comment out this function:
//nodeMouseOver: function(node) {
//return ""+node.type + node.id+"";
//}
I have the same result. Someone know where I wrong?
Solution
I "solved" making a thing " not very good ": (I putted html inside 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 </img><img src='../blu.png'> microRNA </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>
I couldn't solve a different way because seems that alchemy project is died. Thank you at all.
- How to fix Lambda function timeout when interacting with DynamoDB using AWS SDK v3 in Node.js?
- Count of duplicate console.log() resets when called from a different element
- createStore is @deprecated so im trying to replace with configurationStore
- finding a point and its angle on a cubic Bezier curve in JavaScript
- Count cell values only if another condition is met
- Understanding unique keys for array children in React.js
- What are the requirements for audio output in Chrome on Android?
- How to submit an ASP.NET Core Razor Pages form without reloading the page
- How do I fix CORS issue in Fetch API
- Why isn't it good non-compile scripting languages to use for intensive calculations?
- Send Sendgrid Email Without Subject
- How to remove required to an element using jQuery?
- How to format numbers as currency strings
- Trouble using require(); Needing to convert JS file to ES module
- I keep getting Exception: Invalid argument: replacement on a google Apps Script
- Append element as sibling after element?
- Why doesn't npm update install the latest nodemon version?
- Ellipsis in the middle of a text (Mac style)
- Finding all elements with a scroll
- How to get the mouse position relative to the window viewport in javascript?
- jQuery on click to check if it has a div with a certain class and then change the value of a different class
- Firebase deploy error: Neither apiKey nor config.authenticator provided (using Stripe)
- Detecting which input is focused React hooks
- How can I find out if a javascript iterator terminates early?
- Vuetify3 autocomplete with per-item tooltips not clickable
- Renaming Function Parameters with Babel Without Changing Other Identical Identifiers
- How to find npm duplicate packages?
- Color gradient as style on marker
- How to fill the whole canvas with specific color?
- Change onclick action with a Javascript function