Javascript 如何将样式/CSS数据从外部JSON文件导入Cytoscape.js？_Javascript_Css_Json_Promise_Cytoscape.js

Javascript 如何将样式/CSS数据从外部JSON文件导入Cytoscape.js？

javascript css json

Javascript 如何将样式/CSS数据从外部JSON文件导入Cytoscape.js？,javascript,css,json,promise,cytoscape.js,Javascript,Css,Json,Promise,Cytoscape.js,我有一个在桌面Cytoscape应用程序中可视化的网络），网络数据导出为.cyjs文件（尽管有后缀，它是一个JSON文件），而样式数据（这些数据的格式）同样导出为.JSON文件我可以将theoe数据加载到本地Web服务器中运行的Cytoscape.js中——手动将样式数据添加到HTML文件中。但是，我不知道如何直接从style.json文件加载这些样式数据更新：感谢@jaromanda-x和@maxkfranz在下面提供的解决方案，我已经发布了一个答案（如下），在我的同伴研究博客文章中有更详

我有一个在桌面Cytoscape应用程序中可视化的网络），网络数据导出为

.cyjs

文件（尽管有后缀，它是一个JSON文件），而样式数据（这些数据的格式）同样导出为

.JSON

文件

我可以将theoe数据加载到本地Web服务器中运行的Cytoscape.js中——手动将样式数据添加到HTML文件中。但是，我不知道如何直接从

style.json

文件加载这些样式数据

更新：感谢@jaromanda-x和@maxkfranz在下面提供的解决方案，我已经发布了一个答案（如下），在我的同伴研究博客文章中有更详细的描述

cytoscape_js.html

<HTML xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<HEAD>
<meta charset="utf-8" />
<style>
  #cy {
    width: 80%;
    height: 80%;
    position: absolute;
  }
</style>

<script src='https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.9.0/cytoscape.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js'></script>

</HEAD>

<BODY>

<div id='cy'></div>

<script>
  var json = $.getJSON("data.json")
  .done(function(data){
    var cy = cytoscape({

      container: document.getElementById('cy'),

      elements: data.elements,

      style : [ {
        "selector" : "node",
        "css" : {
          "text-valign" : "center",
          "text-halign" : "center",
          "font-family" : "SansSerif.plain",
          "font-weight" : "normal",
          "background-color" : "rgb(204,255,255)",
          "border-width" : 1.5,
          "height" : 35.0,
          "width" : 75.0,
          "border-opacity" : 1.0,
          "color" : "rgb(0,0,0)",
          "border-color" : "rgb(0,153,255)",
          "text-opacity" : 1.0,
          "background-opacity" : 1.0,
          "font-size" : 12,
          "shape" : "ellipse",
          "content" : "data(src_node)"
        }
      }, {
        "selector" : "node:selected",
        "css" : {
          "background-color" : "rgb(255,255,0)"
        }
      }, {
        "selector" : "edge",
        "css" : {
          "color" : "rgb(0,0,0)",
          "source-arrow-shape" : "none",
          "font-family" : "Dialog.plain",
          "font-weight" : "normal",
          "target-arrow-color" : "rgb(0,0,0)",
          "width" : 2.0,
          "source-arrow-color" : "rgb(0,0,0)",
          "line-color" : "rgb(132,132,132)",
          'opacity': 0.5,
          "line-style" : "solid",
          "font-size" : 12,
          "text-opacity" : 1.0,
          "target-arrow-shape" : "triangle",
          "content" : "data(pathway)",
          'curve-style': 'bezier'
        }
      } ],
    });
  });
</script>

</BODY>
</HTML>

<!DOCTYPE html>
<HTML xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<HEAD>
<meta charset="utf-8" />
<title>[Cytoscape.js] Glycolysis + TCA Cycle</title>

<style>
  #cy {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 110px;
    left: 0px;
    bottom: 0px;
    left: 0px;
  }
</style>

<script src='https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.9.0/cytoscape.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js'></script>

</HEAD>

<BODY>

<div id='cy'></div>

<script>
  // ==========================================================================
  // APPROACH #1:

  Promise.all([
    fetch('relations2-glycolysis+tca.tsv.cyjs').then(res => res.json()),
    fetch('styles.json').then(res => res.json())
  ]).then(([{elements}, [{style}]]) => {
    cytoscape({
      container: document.getElementById('cy'),
      elements,
      style,

  // END, APPROACH #1-SPECIFIC CODE
  // Note that we need, here, the (non-edited) Cytoscape-exported "styles.json" file.
  // ==========================================================================

  // ==========================================================================
  // APPROACH #2: UNCOMMENT THIS (AND COMMENT APPROACH #1 LINES ABOVE):

  // var json = $.getJSON('relations2-glycolysis+tca.tsv.cyjs')
  // .done(function(data){
  //   var cy = cytoscape({
  //     container: document.getElementById('cy'),
  //     elements: data.elements,
  //     style: fetch('styles-edited.json').then(res => res.json()).then(json => json.style),

  // END, APPROACH #2-SPECIFIC CODE
  // Notes.
  //   1. Here we need the (edited) Cytoscape-exported "styles.json" file: I
  //      needed to manually delete the leading "[ " at the top, and the lagging
  //      " ]" at the bottom of the Cytoscape-exported "styles.json" file:
  //   2. This also works, but is not needed ("elements: data.elements" works):
  //      elements: fetch('relations2-glycolysis+tca.tsv.cyjs').then(res => res.json()).then(json => json.elements),
  // ==========================================================================

      // In either case, above, I added "curve-style" : "bezier" to the edge properties
      // in the styles-edited.json file, to enable the display of the edges as arrows.

      // ======================================================================
      layout: {
        name: 'preset',
        zoom: 1.2,
        pan: { x: 950, y: 2150 },
        rows: 1
      },

      minZoom: 5e-1,
      maxZoom: 0.25e1,
      zoomingEnabled: true,
      userZoomingEnabled: true,
      panningEnabled: true,
      userPanningEnabled: true,
      boxSelectionEnabled: false,
      selectionType: 'single',
      touchTapThreshold: 8,
      desktopTapThreshold: 4,
      autolock: false,
      autoungrabify: false,
      autounselectify: false,

      // Rendering options:
      headless: false,
      styleEnabled: true,
      hideEdgesOnViewport: false,
      hideLabelsOnViewport: false,
      textureOnViewport: false,
      motionBlur: false,
      motionBlurOpacity: 0.2,
      wheelSensitivity: 0.1,
      pixelRatio: 'auto'
    });
  });
</script>

</BODY>
</HTML>

styles.json

{
  "elements" : {
    "nodes" : [ {
      "data" : {
        "id" : "163",
        "shared_name" : "c00103_glycolysis",
        "src_node" : "c00103",
        "name" : "c00103_glycolysis",
        "x" : 200,
        "y" : 60,
        "tgt_node" : "c00103",
        "SUID" : 163,
        "selected" : false
      },
      "position" : {
        "x" : -29.497192046634154,
        "y" : -1709.4156554007204
      },
      "selected" : false
    }, {
      "data" : {
        "id" : "162",
        "shared_name" : "5.4.2.2_glycolysis",
        "src_node" : "5.4.2.2",
        "name" : "5.4.2.2_glycolysis",
        "x" : 200,
        "y" : 70,
        "tgt_node" : "5.4.2.2",
        "SUID" : 162,
        "selected" : false
      },
      "position" : {
        "x" : -29.497192046634154,
        "y" : -1579.4552719836647
      },
      "selected" : false
    }, {
      "data" : {
        "id" : "161",
        "shared_name" : "c00668_glycolysis",
        "src_node" : "c00668",
        "name" : "c00668_glycolysis",
        "x" : 200,
        "y" : 80,
        "tgt_node" : "c00668",
        "SUID" : 161,
        "selected" : false
      },
      "position" : {
        "x" : -29.497192046634154,
        "y" : -1449.494888566609
      },
      "selected" : false
    } ],
    "edges" : [ {
      "data" : {
        "id" : "361",
        "source" : "163",
        "target" : "162",
        "shared_name" : "c00103_glycolysis () 5.4.2.2_glycolysis",
        "vis" : "vis",
        "shared_interaction" : "",
        "name" : "c00103_glycolysis () 5.4.2.2_glycolysis",
        "interaction" : "",
        "pathway" : 1,
        "SUID" : 361,
        "wt" : "wt",
        "BEND_MAP_ID" : 74,
        "selected" : false
      },
      "selected" : false
    }, {
      "data" : {
        "id" : "360",
        "source" : "162",
        "target" : "161",
        "shared_name" : "5.4.2.2_glycolysis () c00668_glycolysis",
        "vis" : "vis",
        "shared_interaction" : "",
        "name" : "5.4.2.2_glycolysis () c00668_glycolysis",
        "interaction" : "",
        "pathway" : 1,
        "SUID" : 360,
        "wt" : "wt",
        "BEND_MAP_ID" : 76,
        "selected" : false
      },
      "selected" : false
    }, {
      "data" : {
        "id" : "359",
        "source" : "162",
        "target" : "163",
        "shared_name" : "5.4.2.2_glycolysis () c00103_glycolysis",
        "vis" : "vis",
        "shared_interaction" : "",
        "name" : "5.4.2.2_glycolysis () c00103_glycolysis",
        "interaction" : "",
        "pathway" : 1,
        "SUID" : 359,
        "wt" : "wt",
        "BEND_MAP_ID" : 77,
        "selected" : false
      },
      "selected" : false
    }, {
      "data" : {
        "id" : "358",
        "source" : "161",
        "target" : "162",
        "shared_name" : "c00668_glycolysis () 5.4.2.2_glycolysis",
        "vis" : "vis",
        "shared_interaction" : "",
        "name" : "c00668_glycolysis () 5.4.2.2_glycolysis",
        "interaction" : "",
        "pathway" : 1,
        "SUID" : 358,
        "wt" : "wt",
        "BEND_MAP_ID" : 78,
        "selected" : false
      },
      "selected" : false
    } ]
  }
}

[ {
  "format_version" : "1.0",
  "generated_by" : "cytoscape-3.7.1",
  "target_cytoscapejs_version" : "~2.1",
  "title" : "victoria_0",
  "style" : [ {
    "selector" : "node",
    "css" : {
      "text-valign" : "center",
      "text-halign" : "center",
      "font-family" : "SansSerif.plain",
      "font-weight" : "normal",
      "background-color" : "rgb(204,255,255)",
      "border-width" : 1.5,
      "height" : 35.0,
      "width" : 75.0,
      "border-opacity" : 1.0,
      "color" : "rgb(0,0,0)",
      "border-color" : "rgb(0,153,255)",
      "text-opacity" : 1.0,
      "background-opacity" : 1.0,
      "font-size" : 12,
      "shape" : "ellipse",
      "content" : "data(src_node)"
    }
  }, {
    "selector" : "node:selected",
    "css" : {
      "background-color" : "rgb(255,255,0)"
    }
  }, {
    "selector" : "edge",
    "css" : {
      "color" : "rgb(0,0,0)",
      "source-arrow-shape" : "none",
      "font-family" : "Dialog.plain",
      "font-weight" : "normal",
      "target-arrow-color" : "rgb(0,0,0)",
      "width" : 2.0,
      "source-arrow-color" : "rgb(0,0,0)",
      "line-color" : "rgb(132,132,132)",
      "opacity" : 1.0,
      "line-style" : "solid",
      "font-size" : 12,
      "text-opacity" : 1.0,
      "target-arrow-shape" : "triangle",
      "content" : "data(pathway)"
    }
  }, {
    "selector" : "edge[pathway = 1]",
    "css" : {
      "color" : "rgb(204,0,0)"
    }
  }, {
    "selector" : "edge[pathway = 2]",
    "css" : {
      "color" : "rgb(51,102,0)"
    }
  }, {
    "selector" : "edge:selected",
    "css" : {
      "line-color" : "rgb(255,0,0)"
    }
  } ]
} ]

请注意，像

elements

和

style

这样的字段可以简单地被赋予承诺值，并且事情会自动工作，例如

elements:fetch（url1）。然后（res=>res.json（）），style:fetch（url2）。然后（res=>res.json（））

看

要使

fetch（）

或

$.get（）

工作，您必须运行http服务器。

好：非常感谢@jaromanda-x和@maxkfranz，下面是解决方案

我将粘贴下面的HTML代码，其中显示了两种解决方案/方法。我上传了一个tarball，[11.141 KB]，其中包含HTML文件中引用的文件，需要在下面进一步重新创建图形

cytoscape.js.demo.html

<HTML xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<HEAD>
<meta charset="utf-8" />
<style>
  #cy {
    width: 80%;
    height: 80%;
    position: absolute;
  }
</style>

<script src='https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.9.0/cytoscape.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js'></script>

</HEAD>

<BODY>

<div id='cy'></div>

<script>
  var json = $.getJSON("data.json")
  .done(function(data){
    var cy = cytoscape({

      container: document.getElementById('cy'),

      elements: data.elements,

      style : [ {
        "selector" : "node",
        "css" : {
          "text-valign" : "center",
          "text-halign" : "center",
          "font-family" : "SansSerif.plain",
          "font-weight" : "normal",
          "background-color" : "rgb(204,255,255)",
          "border-width" : 1.5,
          "height" : 35.0,
          "width" : 75.0,
          "border-opacity" : 1.0,
          "color" : "rgb(0,0,0)",
          "border-color" : "rgb(0,153,255)",
          "text-opacity" : 1.0,
          "background-opacity" : 1.0,
          "font-size" : 12,
          "shape" : "ellipse",
          "content" : "data(src_node)"
        }
      }, {
        "selector" : "node:selected",
        "css" : {
          "background-color" : "rgb(255,255,0)"
        }
      }, {
        "selector" : "edge",
        "css" : {
          "color" : "rgb(0,0,0)",
          "source-arrow-shape" : "none",
          "font-family" : "Dialog.plain",
          "font-weight" : "normal",
          "target-arrow-color" : "rgb(0,0,0)",
          "width" : 2.0,
          "source-arrow-color" : "rgb(0,0,0)",
          "line-color" : "rgb(132,132,132)",
          'opacity': 0.5,
          "line-style" : "solid",
          "font-size" : 12,
          "text-opacity" : 1.0,
          "target-arrow-shape" : "triangle",
          "content" : "data(pathway)",
          'curve-style': 'bezier'
        }
      } ],
    });
  });
</script>

</BODY>
</HTML>

<!DOCTYPE html>
<HTML xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<HEAD>
<meta charset="utf-8" />
<title>[Cytoscape.js] Glycolysis + TCA Cycle</title>

<style>
  #cy {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 110px;
    left: 0px;
    bottom: 0px;
    left: 0px;
  }
</style>

<script src='https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.9.0/cytoscape.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js'></script>

</HEAD>

<BODY>

<div id='cy'></div>

<script>
  // ==========================================================================
  // APPROACH #1:

  Promise.all([
    fetch('relations2-glycolysis+tca.tsv.cyjs').then(res => res.json()),
    fetch('styles.json').then(res => res.json())
  ]).then(([{elements}, [{style}]]) => {
    cytoscape({
      container: document.getElementById('cy'),
      elements,
      style,

  // END, APPROACH #1-SPECIFIC CODE
  // Note that we need, here, the (non-edited) Cytoscape-exported "styles.json" file.
  // ==========================================================================

  // ==========================================================================
  // APPROACH #2: UNCOMMENT THIS (AND COMMENT APPROACH #1 LINES ABOVE):

  // var json = $.getJSON('relations2-glycolysis+tca.tsv.cyjs')
  // .done(function(data){
  //   var cy = cytoscape({
  //     container: document.getElementById('cy'),
  //     elements: data.elements,
  //     style: fetch('styles-edited.json').then(res => res.json()).then(json => json.style),

  // END, APPROACH #2-SPECIFIC CODE
  // Notes.
  //   1. Here we need the (edited) Cytoscape-exported "styles.json" file: I
  //      needed to manually delete the leading "[ " at the top, and the lagging
  //      " ]" at the bottom of the Cytoscape-exported "styles.json" file:
  //   2. This also works, but is not needed ("elements: data.elements" works):
  //      elements: fetch('relations2-glycolysis+tca.tsv.cyjs').then(res => res.json()).then(json => json.elements),
  // ==========================================================================

      // In either case, above, I added "curve-style" : "bezier" to the edge properties
      // in the styles-edited.json file, to enable the display of the edges as arrows.

      // ======================================================================
      layout: {
        name: 'preset',
        zoom: 1.2,
        pan: { x: 950, y: 2150 },
        rows: 1
      },

      minZoom: 5e-1,
      maxZoom: 0.25e1,
      zoomingEnabled: true,
      userZoomingEnabled: true,
      panningEnabled: true,
      userPanningEnabled: true,
      boxSelectionEnabled: false,
      selectionType: 'single',
      touchTapThreshold: 8,
      desktopTapThreshold: 4,
      autolock: false,
      autoungrabify: false,
      autounselectify: false,

      // Rendering options:
      headless: false,
      styleEnabled: true,
      hideEdgesOnViewport: false,
      hideLabelsOnViewport: false,
      textureOnViewport: false,
      motionBlur: false,
      motionBlurOpacity: 0.2,
      wheelSensitivity: 0.1,
      pixelRatio: 'auto'
    });
  });
</script>

</BODY>
</HTML>


[Cytoscape.js]糖酵解+TCA循环
#赛义德{
宽度：100%；
身高：100%；
位置：绝对位置；
顶部：110px；
左：0px；
底部：0px；
左：0px；
}
// ==========================================================================
//方法1：
我保证([
fetch（'relations2-glycolysis+tca.tsv.cyjs'）。然后（res=>res.json（）），
fetch（'styles.json'）。然后（res=>res.json（））
])。然后（（[{elements}，[{style}]]）=>{
细胞景观({
容器：document.getElementById（'cy'），
元素，
风格
//结束，进近#1-特定代码
//注意，这里我们需要（未编辑的）Cytoscape导出的“styles.json”文件。
// ==========================================================================
// ==========================================================================
//方法#2：取消对该方法的注释（并注释上面的方法#1行）：
//var json=$.getJSON（'relations2-glycolysis+tca.tsv.cyjs'）
//.完成（功能（数据）{
//var cy=细胞景观({
//容器：document.getElementById（'cy'），
//元素：数据元素，
//style:fetch（'styles-edited.json'）。然后（res=>res.json（））。然后（json=>json.style），
//结束，进近#2-特定代码
//注释。
//1.这里我们需要（编辑）Cytoscape导出的“styles.json”文件：I
//需要手动删除顶部的前导“[”和滞后
//Cytoscape导出的“styles.json”文件底部的“]”：
//2.这也有效，但不是必需的（“元素：data.elements”有效）：
//元素：fetch（'relations2-glycolysis+tca.tsv.cyjs'）。然后（res=>res.json（））。然后（json=>json.elements），
// ==========================================================================
//在上述任何一种情况下，我都在边缘属性中添加了“曲线样式”：“bezier”
//在styles-edited.json文件中，启用将边显示为箭头。
// ======================================================================
布局：{
名称：“预设”，
缩放：1.2，
潘{x:950，y:2150}，
行数：1
},
minZoom:5e-1，
最大缩放：0.25e1，
zoomingEnabled:true，
userZoomingEnabled:true，
已启用平移：true，
userPanningEnabled:true，
boxSelectionEnabled:false，
selectionType:'single'，
接触阈值：8，
桌面访问阈值：4，
自动锁定：错误，
自动取消冻结：错误，
自动取消选择：false，
//渲染选项：
无头：错，
styleEnabled:true，
hideEdgesOnViewport:false，
hideLabelsOnViewport:false，
纹理视口：false，
motionBlur:错，
运动模糊不透明度：0.2，
车轮灵敏度：0.1，
像素比率：“自动”
});
});

如果您

$.getJSON（“style.json”）.done（function（style）{…}）

style将是您想要的

style:

non-jquery的数据，现代javascript将类似于我非常喜欢这个答案，但样式无法加载。这里的屏幕截图：您得到的

[Object]

来自JSONoh，等等，看起来您需要

。然后（[{elements}，[{style}]]）=>{

您的styles.json文件不是有效的样式表。顶层是错误的。它应该是这样的：或者您必须执行类似

style:fetch（url）。然后（res=>res.json（））。然后（json=>json.style）

。另请参阅“好消息”；谢谢！Cytoscape导出的“styles”JSON文件包含需要手动删除的超前方括号和滞后方括号

和

。请注意，HTML文件在Web服务器中运行：