代码之家  ›  专栏  ›  技术社区  ›  Kyle Weise

如何将json对象从r/shining发送到cytoscape.js?

cytoscape.js shiny r javascript
  •  0
  • Kyle Weise  · 技术社区  · 6 年前

    我正试图在一个r/shining应用程序中使用cytoscape.js。单独的管道执行一些计算,并为cytoscape.js创建一个格式正确的json对象(请参见 here )。然后我想使用闪亮的应用程序读取文件,并呈现网络可视化。到目前为止,这个工作示例产生了一个错误:

    附录R 

    。#
#这是一个闪亮的Web应用程序。您可以通过单击来运行应用程序
#上面的“运行应用程序”按钮。
γ
#在这里了解更多有关使用“闪亮”构建应用程序的信息:
γ
#网址:http://shining.rstudio.com/
γ

图书馆(闪亮)
图书馆(Rcytoscapejs)
图书馆(DT)
库(JSONLITE)

ui<-navbarpage(“使用cytoscape.js的闪亮蛋白质可视化”,
选项卡面板(“网络”,
侧边栏布局(
侧边栏板(
actionButton(“imprtjson”,“json测试(不工作)”),
宽度=3)
主面板(
RcytoscapejsOutput(“cy”,height=“600px”)。
)
)
)
tags$head(tags$script(src=“cyjs.js”))
)

服务器功能(输入、输出、会话){

observeevent(输入$imprtjson,,{
#消息<。-

#message$elements_json<-tojson(message$elements_json)
#message$style_json<-tojson(message$style_json)
#浏览器()
会话$sendcustommessage(“loadjson”,
message=list(alertmessage=“正在测试将JSON对象从R发送到JS”,
元素_json=read_json(“data/graph_elements0044.json”))
})


}

#运行应用程序
Shinyapp(用户界面=用户界面,服务器=服务器)

    网址:www/cytojs.js
    


    $(document).ready(function()。{

shining.addCustomMessageHandler(“加载JSON”,
功能(消息){

//var expjson=json.stringify(message.elements_json);
//var style json=json.stringify(message.style_json);

var expjson=message.elements_json;
//var style json=message.style_json;

var cy=细胞形态({
容器:document.getElementByID(“cy”),
布局:{
name:'预设',
拟合:真
}
元素:expjson,
样式:[
{
selector:'节点',
样式:{
'背景色':'666',
“label”:“数据(id)”。
}
}
{
selector:'边缘',
样式:{
“宽度”:3,
'线条颜色':'ccc',
'目标箭头颜色':'ccc',
“目标箭头形状”:“三角形”
}
}
]
(});
(});
(});

    对于这个例子,一旦我按下按钮,我希望网络被渲染并出现在应用程序中。当我运行这个并在我的Web浏览器(chrome)中打开开发人员工具控制台时,我会得到一堆错误:
    


    


    为了完整起见,这里有一小段
    


    。[
{
“数据”:。{
“ac_uniprot”:“Q02535”,
“gene”:“id3”,
“role”:“整体”,
“ID”:0,
“父”:0
}
“group”:“节点”
}
{
“数据”:。{
“parent_ac_uniprot”:“Q02535”,
“role”:“起止”,
“ID”:1,
“父”:0,
“label”:“0”
}
“group”:“节点”,
“位置”:。{
“Y”:225.0,
“X”:742.0
}
}
{
“数据”:。{
“parent_ac_uniprot”:“Q02535”,
“role”:“起止”,
“ID”:2,
“父”:0,
“label”:“119”
}
“group”:“节点”,
“位置”:。{
“Y”:225.0,
“X”:860.0
}
}
{
“数据”:。{
“parent_ac_uniprot”:“Q02535”,
“父”:0,
“color”:“cdbe70”,
“label”:“hlh”,
“role”:“域”,
“ID”:3
}
“group”:“节点”
}
{
“位置”:。{
“Y”:225.0,
“X”:784.0
}
“数据”:。{
“parent_ac_uniprot”:“Q02535”,
“role”:“dom_pos”,
“ID”:4,
“父”:3,
“label”:“42”
}
“group”:“节点”
}
]

    当我手动进入并将JSON文件更改为在idproperty周围加引号时,它可以工作,但这显然不是一个实际的解决方案。我对JavaScript比较陌生,我已经用尽了所有我能想到的方法来让它工作。很明显,这是JSON格式的问题…可能是Shining的session$sendcustomeMessage().i s not encoding the objects as needed by cytoscape.js,but I do not know how to solve this.here)然后我想使用闪亮的应用程序读取文件,并呈现网络可视化。到目前为止,这个产生错误的工作示例:
    


    应用程序
    


    #
# 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)中打开开发人员工具控制台时,我会得到一堆错误:
    


    errors
    


    为了完整起见,下面是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格式的东西…可能是闪亮的session$sendCustomeMessage()不是根据cytoscape.js的需要对对象进行编码,但我不知道如何解决这个问题。
    1 回复  |  直到 6 年前
        1
  •  0
  •   Stéphane Laurent    6 年前

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

    if字符值 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))
    推荐文章
    Patrick L.  ·  Cytoscape JS节点厚度
    6 年前
    ddomingo  ·  滑块按属性过滤边(例如,强度[0-1])
    6 年前
    Andreea  ·  如何在cytoscape中保存单击的节点。js?
    7 年前
    William Nelson  ·  迭代cytoscape中的连接节点。js公司
    7 年前
    Daryl Ivan Empuerto Hisola  ·  使用Cytoscape JS的自动机模拟器
    7 年前
    Bram Vanroy  ·  Cytoscape:将XML转换为dagre布局
    8 年前
    sfriberg  ·  与元素关联的数据属性选择器
    8 年前
    Melanie  ·  如何更改cytoscape.js中覆盖层的形状和z索引?
    9 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号