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

Question

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

应用程序

#
# This is a Shiny web application. You can run the application by clicking
# the 'Run App' button above.
#
# Find out more about building applications with Shiny here:
#
#    http://shiny.rstudio.com/
#

library(shiny)
library(rcytoscapejs)
library(DT)
library(jsonlite)

ui <- navbarPage("Shiny Protein Visualization using Cytoscape.js",
                 tabPanel("Network",
                          sidebarLayout(
                            sidebarPanel(
                              actionButton("imprtJSON", "JSON Test (not working)"),
                              width=3),
                            mainPanel(
                              rcytoscapejsOutput("cy", height="600px")
                            )
                          )
                 ),
                 tags$head(tags$script(src="cyjs.js"))
)

server <- function(input, output, session) {

  observeEvent(input$imprtJSON, {
    # message <- 

    # message$elements_json <- toJSON(message$elements_json)
    # message$style_json <- toJSON(message$style_json)
    # browser()
    session$sendCustomMessage("loadJSON",
                              message = list(alertMessage = "Testing sending JSON object from R to JS",
                                             elements_json = read_json("data/graph_elements0044.json")))
  })


}

# Run the application 
shinyApp(ui = ui, server = server)

www / cytojs.js

 $(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'
             }
          }
         ]
          });  
        });  
    });

对于此示例，一旦按下按钮，我就希望网络呈现并出现在应用程序中。 当我运行此程序并在Web浏览器（Chrome）中调出开发人员工具控制台时，出现了以下错误：

为了完整graph_elements0044.json ，这是我正在加载的graph_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的session$sendCustomeMessage()并未按Cytoscape.js的需要对对象进行编码，但我不知道该如何解决。

Answer 1

我宁愿将此作为评论发表，因为我不确定是否会理解问题所在。 但这对于评论来说太长了。

如果需要id字符值，但是您不想更改文件，则可以这样做（在R文件的开头）

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

然后在server.R ：

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