Javascript 如何将JSON对象从R/Shining发送到Cytoscape.js？

我正在尝试在R/Shining应用程序中使用Cytoscape.js。一个单独的管道进行一些计算，并为Cytoscape.js创建一个格式正确的JSON对象（请参阅）。然后我想使用Shiny应用程序读取文件，并呈现网络可视化。到目前为止，我有一个生成错误的工作示例：

应用程序r 对于本例，按下按钮后，我希望网络呈现并显示在应用程序中。当我运行此程序并在我的web浏览器（Chrome）中调出developer tools控制台时，我会遇到一系列错误：

为了完整起见，这里是我正在加载的

graph\u elements0044.json

文件的一个片段：

[
    {
        "data": {
            "ac_uniprot": "Q02535", 
            "gene": "ID3", 
            "role": "whole", 
            "id": 0, 
            "parent": 0
        }, 
        "group": "nodes"
    }, 
    {
        "data": {
            "parent_ac_uniprot": "Q02535", 
            "role": "start-end", 
            "id": 1, 
            "parent": 0, 
            "label": "0"
        }, 
        "group": "nodes", 
        "position": {
            "y": 225.0, 
            "x": 742.0
        }
    }, 
    {
        "data": {
            "parent_ac_uniprot": "Q02535", 
            "role": "start-end", 
            "id": 2, 
            "parent": 0, 
            "label": "119"
        }, 
        "group": "nodes", 
        "position": {
            "y": 225.0, 
            "x": 860.0
        }
    }, 
    {
        "data": {
            "parent_ac_uniprot": "Q02535", 
            "parent": 0, 
            "color": "#CDBE70", 
            "label": "HLH", 
            "role": "domain", 
            "id": 3
        }, 
        "group": "nodes"
    }, 
    {
        "position": {
            "y": 225.0, 
            "x": 784.0
        }, 
        "data": {
            "parent_ac_uniprot": "Q02535", 
            "role": "dom_pos", 
            "id": 4, 
            "parent": 3, 
            "label": "42"
        }, 
        "group": "nodes"
    }
]

---

当我手动进入并将JSON文件更改为在

id

属性周围加引号时，它可以工作，但这显然不是一个实用的解决方案。我对JavaScript还比较陌生，我已经用尽了所有我能想到的方法来实现它。这显然与JSON格式有关……可能Shiny的

会话$sendCustomeMessage（）

没有按照Cytoscape.js的需要对对象进行编码，但我不知道如何解决这个问题

我更愿意将此作为评论发布，因为我不确定是否理解问题所在。但这段话太长，无法发表评论

如果需要

id

的字符值，但不想更改文件，则可以（在R文件的开头）

---

您是否忘记包含

cyto.js

？@StéphaneLaurent否，因为它是一个空文件。这就是我问题的目的。如何编写代码

cyto.js

，以便它能够获取从管道生成的JSON，创建网络，并将其发送回shiny，以便在应用程序中可视化。我将为添加一个编辑clarity@St你好，请看我的编辑为什么你说id周围的引号不实用？你好，Stéphane。对于您的评论，我的意思是，在我的输入文件中手动添加引号并不是解决我的问题的实用方法（即，每次我从管道中获得一个新的JSON，我都必须做同样的事情）。对于你的回答，这似乎奏效了！cytoscape.js对输入的期望值与

session$sendCustomMessage

将R列表转换为JavaScript对象的方式之间必须存在一些差异。我会接受这个答案，因为它足以让我继续前进，尽管它在技术上并不能解决我最初的问题。我的解决方案呢？这不合适吗？

 $(document).ready(function() {

      Shiny.addCustomMessageHandler("loadJSON",
        function(message) {

          //var expJson = JSON.stringify(message.elements_json);
          //var styleJson = JSON.stringify(message.style_json);

          var expJson = message.elements_json;
          //var styleJson = message.style_json;

          var cy = cytoscape({
            container: document.getElementById('cy'),
            layout: {
              name: 'preset',
              fit: true
            },
            elements: expJson,
            style: [ 
            {
             selector: 'node',
             style: {
              'background-color': '#666',
              'label': 'data(id)'
                }
            },
            {
             selector: 'edge',
             style: {
              'width': 3,
              'line-color': '#ccc',
              'target-arrow-color': '#ccc',
              'target-arrow-shape': 'triangle'
             }
          }
         ]
          });  
        });  
    });

[
    {
        "data": {
            "ac_uniprot": "Q02535", 
            "gene": "ID3", 
            "role": "whole", 
            "id": 0, 
            "parent": 0
        }, 
        "group": "nodes"
    }, 
    {
        "data": {
            "parent_ac_uniprot": "Q02535", 
            "role": "start-end", 
            "id": 1, 
            "parent": 0, 
            "label": "0"
        }, 
        "group": "nodes", 
        "position": {
            "y": 225.0, 
            "x": 742.0
        }
    }, 
    {
        "data": {
            "parent_ac_uniprot": "Q02535", 
            "role": "start-end", 
            "id": 2, 
            "parent": 0, 
            "label": "119"
        }, 
        "group": "nodes", 
        "position": {
            "y": 225.0, 
            "x": 860.0
        }
    }, 
    {
        "data": {
            "parent_ac_uniprot": "Q02535", 
            "parent": 0, 
            "color": "#CDBE70", 
            "label": "HLH", 
            "role": "domain", 
            "id": 3
        }, 
        "group": "nodes"
    }, 
    {
        "position": {
            "y": 225.0, 
            "x": 784.0
        }, 
        "data": {
            "parent_ac_uniprot": "Q02535", 
            "role": "dom_pos", 
            "id": 4, 
            "parent": 3, 
            "label": "42"
        }, 
        "group": "nodes"
    }
]

json <- lapply(read_json("data/graph_elements0044.json"), function(x){
  x$data$id <- as.character(x$data$id) 
  return(x)
})

session$sendCustomMessage("loadJSON",
                          message = list(alertMessage = "Testing sending JSON object from R to JS",
                                         elements_json = json))