markmap:将思维导图插入 HTML
markmap: Insert the mindmap to the HTML
我想在 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 */
);
希望能把下面的两个脚本合二为一;这两个非常相似。请帮助我或告诉我在哪里可以找到语法文档,谢谢!
这个你可以自己试试site
我提供的版本如下。
我的问题是:如何将最后两个脚本合并为一个使代码美观?)
<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
为了避免混淆,我决定post下面的结果图
这是我在我的 Hugo 网站上所做的。我在下面提供给需要它的人。
Here is I am trying to embed the markmap to Hugo so far. (demo)
我想在版块下添加日期站点的另一个SVG(思维导图),所以我需要在同一页面上使用多个SVG,这就是为什么我需要将上面的代码集成在一起。
- 脚本标签内的那些函数被称为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/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>
@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/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>
我想在 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 */
);
希望能把下面的两个脚本合二为一;这两个非常相似。请帮助我或告诉我在哪里可以找到语法文档,谢谢!
这个你可以自己试试site
我提供的版本如下。
我的问题是:如何将最后两个脚本合并为一个使代码美观?)
<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
为了避免混淆,我决定post下面的结果图
这是我在我的 Hugo 网站上所做的。我在下面提供给需要它的人。
Here is I am trying to embed the markmap to Hugo so far. (demo)
我想在版块下添加日期站点的另一个SVG(思维导图),所以我需要在同一页面上使用多个SVG,这就是为什么我需要将上面的代码集成在一起。
- 脚本标签内的那些函数被称为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/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>
@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/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>