Javascript 莫瑟弗的炼金术没有'；行不通
我正在使用alchemy.js显示一个图表。问题是我无法显示图形节点的“onMouseOver”标题。 控制台中有一些错误。此处输出： 代码如下：Javascript 莫瑟弗的炼金术没有'；行不通,javascript,html,json,onmouseover,alchemy,Javascript,Html,Json,Onmouseover,Alchemy,我正在使用alchemy.js显示一个图表。问题是我无法显示图形节点的“onMouseOver”标题。 控制台中有一些错误。此处输出： 代码如下： <html> <head> <link rel="stylesheet" href="../css/style.css"/> </head> <body class="ng-scope"> <div class="alchemy" id="alchemy" style=
<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>
显示图形
//HTML“节点类型过滤器”INIETTATO NEL DIV
document.getElementById（“legenda”）.innerHTML=“目标microRNA更改-单击并拖动以移动图形-用两个手指上下滑动以放大或缩小图形”；
//变化无常
变量配置={
//文件json da dove prendiamo i dati
数据源：'../prova.json'，
//诺迪之门酒店，
“nodeStyle”：{
“全部”：{
“半径”：10，
“颜色”：“绿色”，
“边框颜色”：“无”，
“captionColor”：“FFFFFF”，
“captionBackground”：空，
“字幕大小”：12，
“选定”：{//se selezionato
“颜色”：“FFFFFF”，
},
“突出显示”：{//鼠标悬停
“颜色”：“EEEEFF”，
“边框颜色”：“无”
},
“隐藏”：{//nascosto
“颜色”：“无”，
“边框颜色”：“无”
}
},
“目标”：{
“半径”：15，
“颜色”：“EF5350”，
“边框颜色”：“无”，
“captionColor”：“000000”，
“captionBackground”：空，
“字幕大小”：12，
“选定”：{//se selezionato
“颜色”：“000000”，
“边框颜色”：“无”
},
“突出显示”：{//鼠标悬停
“颜色”：“D50000”
},
“隐藏”：{//nascosto
“颜色”：“无”，
“边框颜色”：“无”
}
},
“microRNA”：{
“半径”：15，
“颜色”：“2196F3”，
“边框颜色”：“无”，
“captionColor”：“000000”，
“captionBackground”：空，
“字幕大小”：12，
“选定”：{//se selezionato
“颜色”：“000000”，
“边框颜色”：“无”
},
“突出显示”：{//鼠标悬停
“颜色”：“#1a2691”
},
“隐藏”：{//nascosto
“颜色”：“无”，
“边框颜色”：“无”
}
},
},
//瑞诺迪过滤基地
节点类型：{
“类型”：[“microRNA”，
“目标”]
},
//诺多根半径
rootNodeRadius:30，
没错，
showStats：是的，
没错，
是的，
节点过滤器：是的，
边缘过滤器：错误，
字幕切换：正确，
edgesToggle:没错，
没错，
toggleRootNotes:false，
动物控制：对，
//在英格兰迪雷和里杜尔的渐变中定义zoom che l'utente sará的区域
规模范围：[9.9,4.4]，
//格拉菲科夫人
是的，
//阿尔奇·迪雷蒂
DirectedEdge:错误，
//财产归属权
节点选项：“id”，
edgeCaption:“”，
//这是一个视频，我的名字叫dati dei nodi
//funziona anche鼠标越过柬埔寨nodeClick鼠标点击nodeMouseOver
“节点单击”：函数（节点）{
if（node.\u properties.type==“microRNA”）{
document.getElementById（“info”）.innerHTML=“Informazioni sul nodo microRNA selezionato”+”Id:“+node.\u properties.Id+”
“+”物种：“+node.\u properties.Species+”
“+”名称：“+node.\u properties.Accession+”
“+”Mirbase链接：“+node.\u properties.Mirbase+”
”；
返回节点。\u properties.type；
}
否则{
document.getElementById（“info”）.innerHTML=“Informazioni sul nodo Target selezionato”+”Id:“+node.\u properties.Id+”
“+”物种：“+node.\u properties.Species+”
“+”名称：“+node.\u properties.Geneid:”
“+”ncbi链接：“+node.\u properties.ncbi\u链接+”
“+”ens代码：“+节点。_properties.ens_代码+“
”；
返回节点。\u properties.type；
}
},
//这是一段视频，我喜欢它
“边缘点击”：功能（边缘）{
document.getElementById（“info”）.innerHTML=“Informazioni sull'arco selezionato”+”Source:“+edge.\u properties.Source+”
“+”target:“+edge.\u properties.target+”
“+”Score:“+edge.\u properties.Source\u microrna+”
“+”Name:“+edge.\u properties.Name+”
”“源\目标：“+edge.\u properties.source \目标+”
”；
返回边缘。_properties.source；
},
};
炼金术。开始（配置）；
//输入表格e的副本
函数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）；
//统计
document.getElementById（'li-microRNA'）。innerHTML=a；
document.getElementById（'li-microRNA'）。id=“li-”+a；
}
//nodeMouseOver: function(node) {
//return ""+node.type + node.id+"";
//}
<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>