4

I'm building a web application using Cytoscape.js that visualizes protein interaction data.

Proteins (nodes) need to have ID's corresponding to strings representing their chromosome locations, because this is universal. However, I would like them to be visualized or displayed alongside their common names, and not their ID's.

Any idea how to do this? The Cytoscape documentation doesn't seem to have an answer.

4

1 回答 1

4

您可以在数据字段中指定节点名称。如果您想将该名称显示为节点标签，只需使用该字段label: "data(name)"：

var cy = (window.cy = cytoscape({
  container: document.getElementById("cy"),

  boxSelectionEnabled: false,
  autounselectify: true,

  style: [{
      selector: "node",
      css: {
        label: "data(name)", //access the nodes data with "data(...)"
        // label: "data(id)", 
        "text-valign": "center",
        "text-halign": "center",
        height: "60px",
        width: "100px",
        shape: "rectangle",
        "background-color": "data(faveColor)"
      }
    },
    {
      selector: "edge",
      css: {
        "curve-style": "bezier",
        "control-point-step-size": 40,
        "target-arrow-shape": "triangle"
      }
    }
  ],

  elements: {
    nodes: [{
        data: {
          id: "Top",
          faveColor: "#2763c4",
          name: "Steve"
        }
      },
      {
        data: {
          id: "yes",
          faveColor: "#37a32d",
          name: "Larry"
        }
      },
      {
        data: {
          id: "no",
          faveColor: "#2763c4",
          name: "Kiwi"
        }
      },
      {
        data: {
          id: "Third",
          faveColor: "#2763c4",
          name: "Alex"
        }
      },
      {
        data: {
          id: "Fourth",
          faveColor: "#56a9f7",
          name: "Vader"
        }
      }
    ],
    edges: [{
        data: {
          source: "Top",
          target: "yes"
        }
      },
      {
        data: {
          source: "Top",
          target: "no"
        }
      },
      {
        data: {
          source: "no",
          target: "Third"
        }
      },
      {
        data: {
          source: "Third",
          target: "Fourth"
        }
      },
      {
        data: {
          source: "Fourth",
          target: "Third"
        }
      }
    ]
  },
  layout: {
    name: "dagre"
  }
}));
body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  float: left;
  position: absolute;
}
<html>

<head>
  <meta charset=utf-8 />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
  <script src="https://unpkg.com/cytoscape@3.3.0/dist/cytoscape.min.js">
  </script>
  <!-- cyposcape dagre -->
  <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
  <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>

您也可以在文档中找到它：

于 2019-02-18T10:22:25.407 回答