标记图:将思维导图插入 HTML

问题描述

我想在 Hugo 上使用思维导图,而 markmap 正是我想要的。但我对它的语法非常陌生。 (见下面的代码块)我什至不知道它是什么语言(它是 typescript-arrow-function 吗?)

((e,t)=>{
    const{Markmap:r}=e();
    window.mm=r.create("svg#mindmap-other",null,t)
})(
    ()=>window.markmap,/* parameter e */
    {}  /* parameter t */
);

希望能把最底层的两个脚本合二为一;这两个非常相似。请帮我或告诉我哪里可以找到语法文档,谢谢!

您可以在此site

上自行尝试

我提供我的版本如下。

我的问题是:如何将最后两个脚本合二为一以使代码美观?)

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Markmap</title>
  <script src="https://d3js.org/d3.v6.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <style>
* {
  margin: 0;
  padding: 0;
}
.mindmap {
  display: block;
  width: 100vw;
  height: 100vh;
}
  </style>
</head>

<body>
<svg id="mindmap-lang" class="mindmap"></svg>
<svg id="mindmap-other" class="mindmap"></svg>
</body>

<script>
/* script-Lang */
((e,t)=>{
const{Markmap:r}=e();
window.mm=r.create("svg#mindmap-lang",t)
})(
()=>window.markmap,{
"t":"root","d":0,"v":"Lang","c":
[
  {"t":"heading","d":1,"c":[
      {"t":"heading","d":2,"v":"<a href=\"https://www.python.org/\">Python</a>"},{"t":"heading","v":"JS","c":[
          {"t": "heading","d":3,"v":"jquery"},{"t": "heading","v":"d3js"}
        ]
      }
    ]},"v":"News","c":[]}
]}
);

</script>

<script>
/* script-Other */
((e,t)=>{
const{Markmap:r}=e();
window.mm=r.create("svg#mindmap-other",{
  "t":"heading","v":"Other","c":
  [
    {"t":"heading","v":"H1"},"v":"H1","c":[
        {"t": "heading","v":"H2"},"v":"H2"}
      ]
    }
  ]}
);

</script>

如果您能解释下面发生的事情,那就太好了:

((e,t)=>{
    const{Markmap:r}=e();
    window.mm=r.create("svg",/* parameter e */
    {}  /* parameter t */
);

上面的代码有两个脚本script-Langscript-Other

为了避免混淆,我决定在下面发布结果图片

enter image description here


这是我在我的 Hugo 网站上所做的。我在下面提供了它,供想要的人使用。

Here 到目前为止我正在尝试将标记图嵌入到 Hugo 中。 (demo)

我想在栏目下添加另一个日期站点的SVG(mind-map),所以我需要在同一个页面上有多个SVG,这就是为什么我需要把上面的代码整合在一起。

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)