javascript-标记图：将思维导图插入 HTML

(javascript - markmap: Insert the mindmap to the HTML)

发布于 2020-12-31 06:45:58

我想在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 */
);

希望能把最底层的两个脚本合二为一；这两个非常相似。请帮助我或告诉我在哪里可以找到语法文件，谢谢！

你可以在这个网站上自己尝试

我提供我的版本如下。

我的问题是：如何将最后两个脚本合并为一个以使代码美观？）

<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/markmap-view@0.2.0"></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",null,t)
})(
()=>window.markmap,{
"t":"root","d":0,"v":"Lang","c":
[
  {"t":"heading","d":1,"v":"Lang", "c":[
      {"t":"heading","d":2,"v":"<a href=\"https://www.python.org/\">Python</a>"},
      {"t":"heading","d":2,"v":"JS", "c":[
          {"t": "heading", "d":3, "v":"jquery"},
          {"t": "heading", "d":3, "v":"d3js"}
        ]
      }
    ]},
  {"t":"heading","d":1,"v":"News", "c":[]}
]}
);

</script>

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

</script>

如果你能解释下面发生的事情，那就太好了：

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

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

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

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

这里是我想嵌入markmap雨果至今。（演示）

我想在该部分下添加另一个日期站点的SVG（思维导图），因此我将需要在同一页面上放置多个SVG，这就是为什么我需要将上述代码集成在一起的原因。

Questioner

Carson

Viewed

Original

English

<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/markmap-view@0.2.0"></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) => { const { Markmap: r } = e(); window.mm = r.create("svg#mindmap-lang", null, { "t": "root", "d": 0, "v": "Lang", "c": [{ "t": "heading", "d": 1, "v": "Lang", "c": [{ "t": "heading", "d": 2, "v": "<a href=\"https://www.python.org/\">Python</a>" }, { "t": "heading", "d": 2, "v": "JS", "c": [{ "t": "heading", "d": 3, "v": "jquery" }, { "t": "heading", "d": 3, "v": "d3js" } ] } ] }, { "t": "heading", "d": 1, "v": "News", "c": [] } ] }) window.mm - r.create("svg#mindmap-other", null, { "t": "heading", "d": 0, "v": "Other", "c": [{ "t": "heading", "d": 1, "v": "H1" }, { "t": "heading", "d": 1, "v": "H1", "c": [{ "t": "heading", "d": 2, "v": "H2" }, { "t": "heading", "d": 2, "v": "H2" } ] } ] }) })(() => window.markmap); </script>

javascript-标记图：将思维导图插入 HTML

(javascript - markmap: Insert the mindmap to the HTML)

热门帖子

热门github