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

我在桌面 Cytoscape 应用程序中有一个可视化的网络),网络数据导出为.cyjs文件(尽管有后缀,但它是一个 JSON 文件),样式数据(这些数据的格式)同样导出为.json文件。

我可以将 theoe 数据加载到在本地网络服务器中运行的 Cytoscape.js —— 手动将样式数据添加到 HTML 文件中。但是,我无法弄清楚如何直接从style.json文件中加载这些样式数据。

更新: 感谢@jaromanda-x 和@maxkfranz 在下面非常友好地提供的解决方案,我已经发布了一个答案(如下),在我的同伴研究博客文章Cytoscape.js 样式:外部 JSON 数据文件中有更详细的描述。


样式文件


[ {

  "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)"

    }

  } ]

} ]


德玛西亚99
浏览 447回答 2
2回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript