加载中...
加载中...
本指南展示了如何使用现代Web技术在React应用中实现专业的化学结构可视化。我们结合了多种工具来提供不同维度的化学展示能力。
| 需求场景 | 推荐工具 | 优势 | 适用情况 |
|---|---|---|---|
| 2D平面图 | RDKit.js | 结构最规范，类似出版物效果 | 学术论文、教育材料 |
| 可交互3D模型 | 3Dmol.js | 专门针对化学优化 | 立体结构展示、交互学习 |
| 大分子/蛋白质 | NGL Viewer | 大型PDB文件支持极佳 | 蛋白质结构研究 |
使用SMILES (Simplified Molecular Input Line Entry System) 字符串直接显示2D结构：
<RDKitStructure data="CC(=O)NCC(C)C1=CC=CC=C1" style="publication" height={300} />
支持多种化学文件格式，包括MOL、SDF等：
分子指纹是化学信息学中的重要工具，用于分子相似性比较和虚拟筛选。我们使用Morgan指纹算法：
正在加载3D结构查看器...
正在加载3D结构查看器...
// 使用动态导入和懒加载
const RDKitStructure = dynamic(() => import('./chemistry/RDKitStructure'), { ssr: false })
import { useChemistry } from '@/hooks/useChemistry'
const { isLoaded, smilesToSVG, molToSVG } = useChemistry()
function detectChemicalFormat(data: string) {
if (data.includes('SMILES') || data.match(/^[BCNOSPFIPClBr@=\+\-\[\]\(\)]+$/)) {
return 'smiles'
}
if (data.includes('M END') || data.includes('V2000')) {
return data.includes('$$$$') ? 'sdf' : 'mol'
}
return 'unknown'
}
使用Jaccard相似性比较分子指纹：
function calculateSimilarity(fp1: string, fp2: string) {
const set1 = new Set(
fp1
.split('')
.map((bit, i) => (bit === '1' ? i : null))
.filter(Boolean)
)
const set2 = new Set(
fp2
.split('')
.map((bit, i) => (bit === '1' ? i : null))
.filter(Boolean)
)
const intersection = new Set([...set1].filter((x) => set2.has(x)))
const union = new Set([...set1, ...set2])
return intersection.size / union.size
}
const molecules = [
{ id: 'aspirin', smiles: 'CC(C)OC1=CC=C(C=C1)C(=O)O' },
{ id: 'caffeine', smiles: 'CN1C=NC2=C1C(=O)N(C(=O)N2C)C' },
]
const fingerprints = await Promise.all(
molecules.map(async (mol) => ({
...mol,
fingerprint: await getMorganFingerprint(mol.smiles),
}))
)
通过结合RDKit.js和3Dmol.js，我们构建了一个完整的化学结构可视化解决方案：
这个方案适合教育、科研和工业应用，提供了专业级的化学结构可视化能力。
发表评论
请登录后发表评论
评论 (0)