文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >标记映射:将思维映射插入HTML中

问标记映射:将思维映射插入HTML中
EN

Stack Overflow用户
提问于 2020-12-31 06:45:58
回答 2查看 773关注 0票数 1

我想在雨果上使用一张思维图，而标记图正是我想要的。但我对它的语法非常陌生。(见下面的代码块)我甚至不知道它是什么语言(它是类型记录-箭头-函数吗？)

代码语言：javascript
复制
((e,t)=>{
    const{Markmap:r}=e();
    window.mm=r.create("svg#mindmap-other",null,t)
})(
    ()=>window.markmap,  /* parameter e */
    {}  /* parameter t */
);

我希望我能将下面两个脚本集成到一个脚本中，这两个脚本非常相似。请帮助我或告诉我在哪里可以找到语法文档，谢谢！

你可以在这个站点上自己试试

我提供我的版本如下。

我的问题是：，如何将最后两个脚本合并成一个，使代码变得漂亮？)

​

代码语言：javascript
复制
<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>

​

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

代码语言：javascript
复制
((e,t)=>{
    const{Markmap:r}=e();
    window.mm=r.create("svg",null,t)
})(
    ()=>window.markmap,  /* parameter e */
    {}  /* parameter t */
);

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

为了避免混淆，我决定张贴下面的结果图片。

​

这是我在雨果网站上做的事。我把它放在下面，给想要它的人。

这里是我正在尝试嵌入的标记地图到雨果到目前为止。(演示)

我想要添加另一个SVG (思维地图)的日期网站下的一节，所以我将需要多个SVG在同一页，这就是为什么我需要集成上述代码在一起。

hugo
mindmap
javascript
svg
d3.js
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-12-31 13:13:31

  1. 脚本标记中的那些函数称为生平，一旦定义好，它就会运行.

它接受两个参数，它们是window.markmap，另一个是要表示的object。

所以你可以把它们结合起来，像我一样过同样的生活。

​

代码语言：javascript
复制
<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>

​

票数 2
EN

Stack Overflow用户

发布于 2021-01-03 11:05:26

@XxSTREKxX已经非常清楚地解释了，我把答案组织成了我喜欢的风格。

要点如下：

代码语言：javascript
复制
(
  (para1, para2, ... ,para_n)=>{
    /* implement your logical */  
  }
)(input_para1, input_para2, ...,input_para_n)

我的例子的完整代码，

​

代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/65517545

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档