Simple TiddlyWiki5-syntax (vnd.tiddlywiki) Wiki Map

[peterhajas]

Hey folks,

Having a blast with tw-echarts - it's a really fun plugin!

I haven't used ECharts before, but I wrote a little Wiki Map that gives a nice knowledge tree. Here's the contents of the tiddler (called BrainMap in my wiki):

{
  "tooltip": {
    "trigger": "item"
  },
  "series": [{
    "type": "graph",
    "layout": "force",
    "roam": true,
    "animation": false,
    "label": {
      "position": "right",
      "formatter": "{b}"
    },
    "draggable": false,
    "data": [
<$list>
{"name": "<<currentTiddler>>"},
</$list>
      {"name": "___" }
    ],
    "force": {
      "edgeLength": 25,
      "repulsion": 50,
      "gravity": 0.1
    },
    "edges": [
<$list counter="counter">
<$set name=current value=<<currentTiddler>> >
<$list filter="[all[current]links[]]">
{"source":"<<current>>", "target": "{{!!title}}"},
</$list>
</$set>
</$list>
{"source": 0, "target" : 0}
    ]
    }]
}

I wanted a way for the graph to always be "live". I came up with a clever way to do that. I have this set as my echarts-refresh-trigger:

[all[]get[modified]]

which will produce all the last-modified dates of your tiddlers. This lets the map react live as you edit your TiddlyWiki.

Thanks again!

[linonetwo]

Glad to see you find it easy to decorate your wiki using this plugin! I will recommend people to your addon if they need this Ob style wiki map.

[Zacharia2]

新建一个条目保存上面的代码，条目名称命名为作者提到的BrainMap，设置条目类型为默认或者tiddlywiki5，然后设置一个字段，字段名为echarts-refresh-trigger，字段值为：[all[]get[modified]]。

新建名为OB Relationship Map的条目，内容写<$echarts $height=500px $tiddler="BrainMap"/>，保存后就可以看到效果了。

[Zacharia2]

如果放大至某几个节点元素可以显示名称，并且可以点击跳转显示就好了

[linonetwo]

I have add your example to the plugin, in order to test the click action when you click on the node! Thanks again for your work! The code is under src/echarts/addons/peterhajas/BrainMap.tid

You can use it by <$echarts $tiddler="$:/plugins/Gk0Wk/echarts/addons/BrainMap" $height="500px"/> later.

[linonetwo]

And you can add click handler like

<$echarts
  $tiddler="$:/plugins/Gk0Wk/echarts/addons/BrainMap"
  $height="500px"
  dblclick="(params, parentWidget) => { parentWidget.dispatchEvent({ type: 'tm-navigate', navigateTo: params.data.name }) }"
/>

[linonetwo]

Sourcecode is at https://github.com/tiddly-gittly/tw-echarts/blob/master/src/echarts/addons/peterhajas/BrainMap.tid

[peterhajas]

I've been having a blast with eCharts still. I recently updated this snippet with a few enhancements:

• All tiddlers and tags are included (excluding binary tiddlers)
• Size is inferred based off of text length
• Color is inferred based off of tiddler color, or tag color
• Missing tiddlers have lower opacity
• Tag edges are colored like the tag, and "weaker" with lower opacity

I hope this is useful to someone else - I certainly enjoy it in my Wiki.

{ 
  "tooltip": {
    "trigger": "item"
  },
  "series": [{
    "type": "graph",
    "layout": "force",
    "roam": true,
    "animation": true,
    "label": {
      "position": "center",
      "formatter": "{b}"
    },
    "draggable": true,
    "data": [
<$list filter="[!is[system]!is[draft]!is[binary]sort[]]  [links[]is[missing]!is[system]sort[]]">

{
"name": "<<currentTiddler>>",
<$list filter="[<currentTiddler>get[text]length[]log[2]]">
"symbolSize" : <<currentTiddler>>,
</$list>
"itemStyle" : {
<$list filter="[<currentTiddler>is[missing]]">
  "opacity" : 0.5,
</$list>
<$list filter="[<currentTiddler>get[tags]get[color]]">
  "color" : "<<currentTiddler>>",
</$list>
<$list filter="[<currentTiddler>get[color]]">
  "color" : "<<currentTiddler>>",
</$list>
},
},
</$list>
    ],
    "force": {
      "edgeLength": 25,
      "repulsion": 10,
      "gravity": 0.1
    },
    "edges": [
      <$list>
        <$set name=currentSource value=<<currentTiddler>> >
          <$list filter="[all[current]links[]] [all[current]tags[]]">

            {
"source":"<<currentSource>>",
"target": "{{!!title}}",
"lineStyle": {
"opacity" : 0.75,
<$list filter="[all[current]is[tag]]">
"opacity" : 0.15,
<$list filter="[<currentTiddler>get[color]]">
  "color" : "<<currentTiddler>>",
</$list>
</$list>
},
},
          </$list>
        </$set>
      </$list>
    ]
    }]
}

I'm also using this with @linonetwo's tip for double clicking, which has made the graph view even more useful.