markmap: Insert the mindmap to the HTML

Question

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/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>

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

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.

Hey the script that you have given looks like an IIFE for arrow function. and yes you guessed it right ! Its type script. I removed the second script tag and it seems to work well what is the use of it ? — strek, Dec 31 '20 at 08:06
@XxSTREKxX I update the question, and the second script is to create ``script-Other`` — Carson, Dec 31 '20 at 09:08

score 2 · Accepted Answer · answered Dec 31 '20 at 13:13

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/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>

score 0 · Answer 2 · answered Jan 03 '21 at 11:05

@XxSTREKxX has explained very clearly that I organize the answer into a style that I prefer.

The key points are as follows,

(
  (para1, para2, ... ,para_n)=>{
    /* implement your logical */  
  }
)(input_para1, input_para2, ...,input_para_n)

Full code of my example,

<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>
((e, lang_json, other_json)=>{
    const{Markmap:r}=e();
    window.mm=r.create("svg#mindmap-lang",null,lang_json)
    window.mm=r.create("svg#mindmap-other",null,other_json)
})(
  ()=>window.markmap, /* parameter e */
  {  /* parameter lang_json */
    "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":[]}
    ]
  },
  {  /* parameter other_json */
    "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>

markmap: Insert the mindmap to the HTML

2 Answers2

Linked