Vue + vue-d3 实现族谱图的简单示例

最新推荐文章于 2024-06-14 16:08:36 发布

桃根仙

最新推荐文章于 2024-06-14 16:08:36 发布

阅读量1.2k

点赞数

分类专栏： vuejs 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/taotaobaobei/article/details/128952710

版权

vuejs 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

安装 vue-d3
```
npm install vue-d3
```

在 main.js 中引入 vue-d3

import VueD3 from 'vue-d3';
Vue.use(VueD3);

创建一个新的 Vue 组件

<template>
  <div>
    <d3-tree :data="treeData"></d3-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: {
        name: 'Root',
        children: [
          {
            name: 'Parent 1',
            children: [
              { name: 'Child 1' },
              { name: 'Child 2' },
              { name: 'Child 3' }
            ]
          },
          {
            name: 'Parent 2',
            children: [
              { name: 'Child 4' },
              { name: 'Child 5' },
              { name: 'Child 6' }
            ]
          }
        ]
      }
    };
  }
};
</script>