javascript - 如何从 cytoscape.js 中的 mysql 数据库中检索节点和元素？

Question

我有一个包含 geneID 的表“entrezgene”，将用于创建节点的名称和另一个包含 geneID 的表“interaction”，geneID2 将分别用作 cytoscape.js 中的源和目标。

我在下面写了一个 php 文件(只针对 entrezgene 表):

<?php
include 'dbconnection.php';

$sqlentrezgene = "select geneID, name from entrezgene";
$resultentrezgene = mysqli_query($connection, $sqlentrezgene) or die("Error in Selecting " . mysqli_error($connection));

$json = array();

while($row = mysqli_fetch_array ($resultentrezgene))     
{
$entrezgene = array(
    'id' => $row['geneID'],
    'name' => $row['name']
);
array_push($json, $entrezgene);
}

$jsonstring = json_encode($json);
echo $jsonstring;
?>

Cytoscape.js 文件:

        $('#cy').cytoscape({
  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'content': 'data(name)',
        'text-valign': 'top',
        'color': 'white',
        'text-outline-width': 1,
        'text-outline-color': '#888'
      })
    .selector('edge')
      .css({
        'target-arrow-shape': 'triangle'
      })
    .selector(':selected')
      .css({
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black'
      })
    .selector('.faded')
      .css({
        'opacity': 0,
        'text-opacity': 0.25
      }),



  elements: {
    nodes: [

    //Manually entered
      { data: {id: '1', name: 'A1BG_HUMAN'} },
      { data: {id: '10549', name: 'PRDX4_HUMAN'} },
      { data: {id: '10935', name: 'PRDX3_HUMAN'} },
      { data: {id: '1192', name: 'CLIC1_HUMAN'} },
      { data: {id: '2923', name: 'PDIA3_HUMAN'} }

    ],
    edges: [
    //Manually entered
      { data: { source: '1', target: '10549' } },
      { data: { source: '10549', target: '10935' } },
      { data: { source: '10549', target: '1192' } },
      { data: { source: '10549', target: '2923' } }
    ]
  },

  ready: function(){
    window.cy = this;

    // giddy up...

    cy.elements().unselectify();

    cy.on('tap', 'node', function(e){
      var node = e.cyTarget; 
      var neighborhood = node.neighborhood().add(node);

      cy.elements().addClass('faded');
      neighborhood.removeClass('faded');
    });

    cy.on('tap', function(e){
      if( e.cyTarget === cy ){
        cy.elements().removeClass('faded');
      }
    });
  }
});

但问题是表entrezgene有16388行，表interaction有225287行。因此手动输入它们将非常耗时。有解决办法吗？

Answer 1

我不知道你的整体项目结构，所以我可能无法给出详细的说明，但我可以向你展示我如何在我的一个项目中使用 cytoscape.js:

这是我的 graphview.js 的一个异常(exception)

主要入口点是 init 函数(您可以在文档准备就绪或单击元素时调用它，...)。这会对您的服务器执行 ajax 调用，如果调用成功，它会使用接收到的数据调用函数 displaygraph。

var init = function() {
    //.. do some overall initialization
    $.ajax({
        url: '/url/to/getgraph.php',
        method: 'GET', 
        dataType: 'json',
        data: {},  //probably you have some parameters
        success: displaygraph, 
        error: function() {alert('error getting data');}
    });
}

函数 displaygraph 然后负责图形的初始化和显示。它从 ajax 调用接收数据。这可能或多或少是您上面的代码，只是节点和边不是预先输入的，而是从从服务器接收到的数据中获取的。

var displaygraph = function(data) {
    $('#cy').cytoscape({
        style: // ... 

        elements: {
            nodes: data.nodes,
            edges: data.edges
        },

        ready: function(){
            //...
        }
    });

}

并且在服务器端，您必须确保发送回客户端的数据包含所有必要的信息，即节点和边的结构符合 cytoscape 的预期。我假设您用于读取数据库的初始代码有效(我不是 PHP 专家，所以无法检查它)，所以我只是添加了从另一个表读取交互并在包含节点和边缘的对象上创建。

<?php
include 'dbconnection.php';

$sqlentrezgene = "select geneID, name from entrezgene";
$resultentrezgene = mysqli_query($connection, $sqlentrezgene) or die("Error in Selecting " . mysqli_error($connection));

$nodes= array();
while($row = mysqli_fetch_array ($resultentrezgene))     
{
    //create each entry in the array exactly as cytoscape expects it, ie with the data property
    $entrezgene = array('data' => array(
        'id' => $row['geneID'],
        'name' => $row['name']
    ));
    array_push($nodes, $entrezgene);
}

$sqlentrezinter = "select geneID1, geneID2 from interaction";
$resultentrezinter = mysqli_query($connection, $sqlentrezinter) or die("Error in Selecting " . mysqli_error($connection));

$edges= array();
while($row = mysqli_fetch_array ($resultentrezinter))     
{
    $entrezinter = array('data' => array(
        'source' => $row['geneID1'],
        'target' => $row['geneID2']
    ));
    array_push($edges, $entrezinter);
}

$json = array(
   'nodes' => $nodes,
   'edges' => $edges
);

$jsonstring = json_encode($json);
echo $jsonstring;
?>

我不是 PHP 专家，因此服务器部分可能存在一些问题，但您应该了解总体思路。