生物合成路径可视化——前端代码实现

最新推荐文章于 2024-08-15 00:00:00 发布

sun_girl_

最新推荐文章于 2024-08-15 00:00:00 发布

阅读量298

点赞数 1

分类专栏：笔记文章标签：前端信息可视化数据可视化

本文链接：https://blog.csdn.net/sun_girl_/article/details/132833796

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

主要用到cytoscape工具和ChemDoodle工具。ChemDoodle官网教程 cytoscape官网教程

1 使用ChemDoodle画分子结构图

如果可以自己生成分子结构图的，可以跳过这一步。

1.1 ChemDoodle安装

官网下载地址——点击Download chemdoodle web compoents v9.5.0
chemDoodle官网下载地址
在这里插入图片描述
我们需要的是 install 文件夹，里面有css文件和js文件。

1.2 代码实现

Html代码如下：

<html>

<head>
	<!--
		这里的link和script的href和src要替换成自己的文件地址。
	-->
	<link rel="stylesheet" href="../install/ChemDoodleWeb.css" type="text/css">
	<script type="text/javascript" src="../install/ChemDoodleWeb.js"></script>
	<title>ChemDoodle Web Component Viewer : ACS Document 1996</title>
	<style>
	</style>
</head

<body>
	<script>
		// 对每个画布设置默认样式
		// 想要画布为正圆 则需要改变css的样式
		ChemDoodle.DEFAULT_STYLES.bondLength_2D = 10; // 设置键长
		// ChemDoodle.DEFAULT_STYLES.bonds_width_2D = .6; // 设置边的粗细
		ChemDoodle.DEFAULT_STYLES.bonds_saturationWidthAbs_2D = 2.6; // 设置苯环的内键离边的距离
		ChemDoodle.DEFAULT_STYLES.bonds_hashSpacing_2D = 2.5; // 
		ChemDoodle.DEFAULT_STYLES.atoms_font_size_2D = 10; //设置字体大小
		ChemDoodle.DEFAULT_STYLES.atoms_font_families_2D = ['Helvetica', 'Arial', 'sans-serif'];
		ChemDoodle.DEFAULT_STYLES.atoms_displayTerminalCarbonLabels_2D = true; 
		ChemDoodle.DEFAULT_STYLES.atoms_useJMOLColors = true;  // OH 显示为红色
		// ChemDoodle.DEFAULT_STYLES.scale = .5
		console.log(ChemDoodle);
		// ViewerCanvas

		let myCanvas = new ChemDoodle.ViewerCanvas('id', 100, 100);
		myCanvas.emptyMessage = 'No Data Loaded!';
		let mol1 = 'Molecule Name\n  CHEMDOOD08070920033D 0   0.00000     0.00000     0\n[Insert Comment Here]\n13 13  0  0  1  0  0  0  0  0999 V2000\n   25.0600  -15.8200    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   25.0600  -17.2200    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   23.8700  -17.9200    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   22.6800  -17.2200    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   22.6800  -15.8200    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   23.8700  -15.1200    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   26.3200  -15.1200    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   21.4200  -17.9900    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n   27.5100  -15.8200    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   28.7000  -15.1200    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   29.8900  -15.8200    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n   28.7000  -13.7200    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n   27.5100  -17.2200    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n  1  2  2  0     0  0\n  2  3  1  0     0  0\n  3  4  2  0     0  0\n  4  5  1  0     0  0\n  5  6  2  0     0  0\n  1  6  1  0     0  0\n  1  7  1  0     0  0\n  4  8  1  0     0  0\n  7  9  1  0     0  0\n  9 10  1  0     0  0\n 10 11  1  0     0  0\n 10 12  2  0     0  0\n  9 13  1  1     0  0\nM  END\n'
		let chem_mol = ChemDoodle.readMOL(mol1);
		//the bond lengths should be 14.4 pixels
		myCanvas.loadMolecule(chem_mol);
		// 打开浏览器会直接跳出来下载 保存生成的分子结构图
		ChemDoodle.io.png.download(myCanvas, "mol1");
	</script>
</body>
</html>

2 使用 cytoscape 一系列工具画路径图

2.1 结果示意图：

生物合成路径可视化

2.2 cytoscape 安装：

cytoscape：画基本的路径，有多种布局样式可选。
cytoscape-canvas：用于在cytoscape图上或下创建画布的扩展。用于自定义节点/边缘，绘制背景等。
cytoscape-klay：一种布局样式的扩展。这种离散布局为大多数图创建了良好的结果，并且支持复合节点。

三种工具的安装方式如下：

npm install cytoscape
npm install cytoscape-canvas
npm install cytoscape-klay

2.3 代码实现

这里就要调用到前面我们生成的分子结构图
在代码中，除了要引用前面安装的工具外，还要引用一个klay.js

<!doctype html>
<html>
<head>
	<script src="../node_modules/cytoscape/dist/cytoscape.min.js"></script>
	<script src="../node_modules/cytoscape-canvas/dist/cytoscape-canvas.js"></script>
	<script src="https://unpkg.com/klayjs@0.4.1/klay.js"></script>
	<script src="../node_modules/cytoscape-klay/cytoscape-klay.js"></script>

	<style>
		#cy {
			width: 90%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}
	</style>
</head>

<body>
	<div id="cy"></div>
	<script>
		// document.addEventListener 这个外层不能去
		document.addEventListener('DOMContentLoaded', function () {
			// 它自动注册的扩展名是cytoscapeKlay
			// 设置klay的optons
			var cy = cytoscape({
				container: document.getElementById("cy"),
				style: [
					{
						selector: "node",
						css: {
							label: "data(name)",
							'font-size': '4px',
							'bounds-expansion': '10px',
							// 设置节点大小
							'width': '25px',
							'height': '25px',
							// 设置节点圆颜色
							'background-color': 'rgb(80,160,200)',
							// 设置文字颜色
							'color': 'rgba(80,160,200,.8)'
						}
					},
					{
						selector: "edge",
						css: {
							"curve-style": "bezier", 
							"target-arrow-shape": "triangle",
							"arrow-scale": .4, //设置箭头大小
							'line-color': 'rgb(80,160,200)',
							'target-arrow-color': 'rgb(80,160,200)',
							'width': .5,
							label: "data(name)",
							'text-margin-y': '-8px',
							'font-size': '4px',
						}
					}
				],
				elements: {
					nodes: [
						{ data: { id: "c1", name: "C00082", img: "./mols/mol1.png" } },
						{ data: { id: "c2", name: "C00146", img: "./mols/mol2.png" } },
						{ data: { id: "c3", name: "C00090", img: "./mols/mol3.png" } },
						{ data: { id: "c4", name: "C00230", img: "./mols/mol4.png" } },
						{ data: { id: "c5", name: "C06672", img: "./mols/mol5.png" } },
						{ data: { id: "c6", name: "C00755", img: "./mols/mol6.png" } },
						{ data: { id: "c7", name: "C00756", img: "./mols/mol6.png" } },
					],
					edges: [
						{ data: { source: "c1", target: "c2", name: "R00728" } },
						{ data: { source: "c2", target: "c3", name: "R01238" } },
						{ data: { source: "c3", target: "c4", name: "R00822" } },
						{ data: { source: "c4", target: "c5", name: "R10136" } },
						{ data: { source: "c5", target: "c6", name: "R05699" } },
						{ data: { source: "c1", target: "c7", name: "R00000" } },
						{ data: { source: "c7", target: "c6", name: "R00001" } },
					]
				},
				layout: {
					name: "klay",
				}
			});
			const Layer = cy.cyCanvas({
				zIndex: 3 // 设置正值时，画布在上方，但此时不可以设置背景，不然会覆盖掉下层所有图形
			});
			const canvas = Layer.getCanvas();
			const ctx = canvas.getContext("2d");

			cy.on("render cyCanvas.resize", evt => {
				Layer.resetTransform(ctx);
				Layer.clear(ctx);
				Layer.setTransform(ctx);
				ctx.save();
				ctx.fillStyle = "white";

				// 这一块代码设置改变节点的形状
				cy.nodes().forEach(node => {
					const pos = node.position();
					// pos位置是圆心位置 宽高是自己设置的更改后的宽高，不是原本的
					// drawImage(Image,左上角位置x，y，宽，高)
					ctx.beginPath();
					ctx.arc(pos.x, pos.y, 12, 0, Math.PI * 2, false);
					ctx.clip();

					// 设置不同的节点显示不同的图
					let image = new Image();
					image.src = node.data("img");
					ctx.drawImage(image, pos.x - 12, pos.y - 12, 24, 24); // 参数4，5是宽
					ctx.restore();
					ctx.save();
				});
				ctx.restore();
				// Draw text that is fixed in the canvas
				Layer.resetTransform(ctx);
				ctx.save();
				ctx.restore();
			});
		});
	</script>
</body>
</html>