Vue vue-mindmap

by kabanoki

HTML

<link rel="stylesheet" href="https://unpkg.com/vue-mindmap/dist/vue-mindmap.css">
<div id="app">
        <mindmap
        :nodes="nodes"
        :connections="connections"
        :editable="true"
      ></mindmap>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-mindmap.js"></script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

Vue.use(VueMindmap);
new Vue({
    el: "#app",
    data: {
        'nodes': [
            {
                'text': 'カバの樹',
                'url': 'https://www.kabanoki.net',
                'fx': 10,
                'fy': 10,
                'nodes': [
                ],
                'category': 'Blog'
            },
            {
                'text': 'カテゴリー｜カバの樹',
                'url': 'https://www.kabanoki.net',
                'fx': -100,
                'fy': 100,
                'nodes': [
                    {
                        'text': 'vue.js',
                        'url': 'https://www.kabanoki.net/category/vue-js/',
                        'fx': 176.083777747024,
                        'fy': -665.1641376795345,
                        'nodes': [],
                        'category': 'blog category vue',
                        'color': 'rgba(255, 189, 10, 1.0)'
                    },
                    {
                        'text': 'wordpress',
                        'url': 'https://www.kabanoki.net/category/wordpress/',
                        'fx': 176.083777747024,
                        'fy': -665.1641376795345,
                        'nodes': [],
                        'category': 'blog category vue',
                        'color': 'rgba(255, 189, 10, 1.0)'
                    },
                    {
                        'text': 'codeigniter',
                        'url': 'https://www.kabanoki.net/category/codeigniter/',
                        'fx': 176.083777747024,
                        'fy': -665.1641376795345,
                        'nodes': [],
                        'category': 'blog category vue',
                        'color': 'rgba(255, 189, 10, 1.0)'
                    },
                ],
                'category': 'Blog'
            },
            {
                'text': '7月|カバの樹',
                'url': 'https://www.kabanoki.net/date/2019/07/',
                'fx': 450,
                'fy':...