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

桃根仙

于 2023-02-09 14:39:57 发布

阅读量1.6k

点赞数

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

本文链接：https://blog.youkuaiyun.com/taotaobaobei/article/details/128952710

版权

vuejs 专栏收录该内容

29 篇文章

订阅专栏

本文展示了如何在Vue项目中安装并使用vue-d3库。首先通过npm安装，然后在main.js中引入并注册。接着创建一个Vue组件，利用d3-tree展示预定义的数据结构，数据包括Root节点以及其子节点Parent1和Parent2，每个Parent下有多个Child节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装 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>