答案 0 :(得分：0)
我“解决”制作“不太好”的东西:(我在javascript里面放了html）
<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>
我无法解决另一种方式，因为似乎炼金术项目已经死亡。 谢谢你。