绘图.svg 与 javascript 模块“RDKIT-JS”

Question

first of all I'm relatively new to javascript.首先，我对 javascript 比较陌生。 So I'm sorry if my question is dumb.如果我的问题很愚蠢，我很抱歉。 I would like to draw a molecule on my webiste by using this tool https://github.com/rdkit/rdkit-js .我想通过使用这个工具https://github.com/rdkit/rdkit-js在我的网站上绘制一个分子。 I also found an example here https://iwatobipen.wordpress.com/2021/12/29/create-desktop-chemoinformatics-application-with-js-chemoinformatics-rdkit-js/comment-page-1/ .我还在这里找到了一个示例https://iwatobipen.wordpress.com/2021/12/29/create-desktop-chemoinformatics-application-with-js-chemoinformatics-rdkit-js/comment-page-1/ 。 This example works in my case but when i try to invoke a function to draw a molecule as a.svg without using the example code, I fail.此示例适用于我的情况，但是当我尝试调用 function 以在不使用示例代码的情况下将分子绘制为 a.svg 时，我失败了。 I get this error-message in my browser:我在浏览器中收到此错误消息：

Uncaught ReferenceError: RDKit is not defined
    at drawmol (results:21:15)
    at results:33:5

In the following code example you can see the first case where it works and the second case were it doesn't.在下面的代码示例中，您可以看到第一种情况有效，第二种情况无效。 In both cases i use the same function.:在这两种情况下，我都使用相同的 function：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/@rdkit/rdkit/dist/RDKit_minimal.js"></script>
  <title>Document</title>
  <script>
    window
      .initRDKitModule()
      .then(function (RDKit) {
        console.log("RDKit version: " + RDKit.version());
        window.RDKit = RDKit;
      })
      .catch(() => {
      });
  </script>

  <script> var drawmol = function() {

    var mol = RDKit.get_mol("C1=CC=C(C=C1)O"); // the string here is a string representation of chemical molecules, it could also be something like "CO" or "CCCCC", shouldnt be important
    var svg = mol.get_svg();
    document.getElementById("drawer").innerHTML = svg;         
};
</script>
</head>

<body>
  <button type='button' onclick='drawmol()'> <!-- this works --> 
    draw 
  </button><br>  
  <script>
    // drawmol() //this doesnt work
  </script>

<div id='drawer'></div>
</body>

</body>
</html>

Later i would like to use the module to dynamically make those images.后来我想使用该模块来动态制作这些图像。 I use django as the framework.我使用 django 作为框架。 In this case i tried to present a minimal example without the django stuff.在这种情况下，我试图展示一个没有 django 东西的最小示例。

Thanks in advance for your effort!提前感谢您的努力！

Answer 1

You are calling drawmol() before RDKit is ready.您在 RDKit 准备好之前调用drawmol() 。

To fix this, place it after RDKit is loaded:要解决此问题，请在加载 RDKit 后放置它：

    window
      .initRDKitModule()
      .then(function (RDKit) {
        console.log("RDKit version: " + RDKit.version());
        window.RDKit = RDKit;
        //Now RDKit is loaded you can safely call drawmol()
        drawmol();
      })
      .catch(() => {
      });

绘图.svg 与 javascript 模块“RDKIT-JS”

问题描述

1 个解决方案

解决方案1
0 2022-08-12 13:16:26

绘图.svg 与 javascript 模块“RDKIT-JS”

问题描述

1 个解决方案

解决方案1 0 2022-08-12 13:16:26

解决方案1
0 2022-08-12 13:16:26