markmap: вставить карту разума в HTML

Я хотел использовать карту разума на Hugo и markmap - именно то, что я хотел. Но я очень не знаком с его синтаксисом. (см. ниже блок кода) Я даже не знаю, на каком это языке (это typescript- стрелка-функция?)

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

Замечательно, если вы можете объяснить, что происходит ниже:

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

приведенный выше код имеет два сценария script-Lang и script-Other

во избежание путаницы я решил опубликовать изображение результатов ниже введите описание изображения здесь

Вот что я сделал на своем сайте Hugo. Я предоставил это ниже, для тех, кто этого хочет.

javascript svg d3.js hugo mindmap
person Carson    schedule 31.12.2020    source источник
comment
Привет, сценарий, который вы дали, выглядит как IIFE для стрелочной функции. и да, вы правильно угадали! Его тип скрипт. Я удалил второй тег скрипта, и, похоже, он работает хорошо, какая от него польза?   -  person strek    schedule 31.12.2020
comment
@XxSTREKxX Я обновляю вопрос, а второй скрипт - создать script-Other   -  person Carson    schedule 31.12.2020

Ответы (2)


arrow_upward
2
arrow_downward

  1. Эти функции внутри тега скрипта известны как IIFE, они запускаются, как только как это определено ...

Требуется два параметра: window.markmap и еще один object, который будет представлен.

так что вы можете объединить их, сделав такой же IIFE, как и я ..

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

person strek    schedule 31.12.2020

arrow_upward
0
arrow_downward

@XxSTREKxX очень четко объяснил, что я организую ответ в стиле, который мне больше нравится.

Ключевые моменты заключаются в следующем:

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

Полный код моего примера,

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

person Carson    schedule 03.01.2021