图表中的美人鱼 API 语法错误 - cytoscape.umd.js - 无法读取未定义的属性(读取“h”)

问题描述 投票:0回答:1

我使用 Javascript 从我的数据(来自数组)创建美人鱼思维导图的语法。该图在 https://mermaid.live/edit 中呈现得很漂亮。 我将美人鱼 API 与“await mermaid.renderAsync”一起使用。 (附代码)。 现在的问题是,我第一次调用它时,出现错误“图表中的语法错误”,并且在控制台中出现错误:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'h')
    at cF.run (cytoscape.umd.js

如果我现在改变我的主题(例如基本或中性或黑暗),思维导图会在第二次调用时正确显示。 这里的错误在哪里?

渲染图形的代码:

async function makeGraph(id) {
    let data = localStorage.getItem("mermaidMindMapInput");
    
    var svg = await mermaid.renderAsync("svg_" + id, data);
    var elem = document.getElementById(id);
    elem.innerHTML = svg;
}

html:

<div id="g2"></div>

更改主题的代码:

   function changeTheme() {
        // Get a reference to the select element
        var themeSelect = document.querySelector("#theme-select");

        // Add an event listener to the select element to change the theme
        console.log(document.querySelector("#theme-select"));
        document
            .querySelector("#theme-select")
            .addEventListener("change", function () {
                // Get the selected theme
                var selectedTheme = event.target.value;

                // Check if the selected theme is different from the current theme
                if (selectedTheme !== currentTheme) {
                    // Update the current theme
                    currentTheme = selectedTheme;

                    // Reinitialize Mermaid with the new theme
                    mermaid.initialize({ startOnLoad: true, theme: currentTheme });

                    var diagrams = document.querySelectorAll(".g2");
                    diagrams.forEach((diagram) => {
                        var svg = diagram.querySelector("svg");
                        if (svg) {
                            diagram.removeChild(svg);
                        }
                    });

                    makeGraph("g2");
                }
            });
    }

这是思维导图的结果:

javascript cytoscape.js mermaid
1个回答
0
投票

我解决了我的问题。首先,我将 changeTheme("neutral") 称为固定主题。然后我调用 make_graph() 函数。它有效。!

© www.soinside.com 2019 - 2024. All rights reserved.