Search code examples
javascriptsvgd3.jshugomindmap

markmap: Insert the mindmap to the HTML

I wanted to use a mindmap on Hugo, and markmap was exactly what I wanted. But I'm very unfamiliar with its syntax. (see below code-block) I don't even know what language it is (is it typescript-arrow-function?)

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

I hope I can integrate the bottom two scripts into one; these two are very similar. Please help me or tell me where to find the grammar document, thanks!

You can try it by yourself on this site

and I provide my version as below.

my question is: How can I merge the last two scripts into one to make the code beautiful?)

<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",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>

It's wonderful if you can explain what is going on below:

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

above code have two scripts script-Lang and script-Other

in order to avoid confusion, I decided to post the results image below enter image description here

Here's what I did on my Hugo site. I provided it under below, for someone who wants it.

Here is I am trying to embed the markmap to Hugo so far. (demo)

I want to add another SVG(mind-map) of the date site under the section, so I will need multiple SVG on the same page, which is why I need to integrate the above code together.

Solution
    1. Those function inside the script tag is know as IIFE it runs as soon as it is defined...

    It takes in two parameter they are window.markmap and another is the object to be represented.

    so you can combine them by making a same IIFE like i've done..

    <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) => {
    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>