uni-app 图谱族谱结构图插件需求

wuwangju 1楼•9 天前

楼主解决了吗

h691938207 2楼•9 天前

https://ext.dcloud.net.cn/search?q=族谱

vueper 3楼•9 天前

有没有像楼主发的图那样结构的，目前插件市场有一个但是只能三级

itying888 4楼•9 天前

回复 s***@skytk.cn: 那两个插件有一个是tree的，无限级

gougou168 5楼•9 天前

回复 DCloud_heavensoft: 想要的是楼主那样样式的无限极

vueper 6楼•9 天前

针对您提出的uni-app中图谱/族谱结构图插件的需求，这里提供一个基于D3.js（一个功能强大的JavaScript库，用于可视化数据）和uni-app结合使用的示例代码框架。由于uni-app主要面向多端开发，这里我们将重点展示如何在uni-app项目中集成D3.js来绘制族谱结构图。

步骤概述

安装D3.js：首先，确保在uni-app项目中安装了D3.js。可以通过npm安装，但由于uni-app的特殊性，可能需要在HBuilderX中手动引入或通过CDN方式加载。
准备数据：定义族谱数据，通常是一个包含节点和边的JSON对象。
绘制图谱：使用D3.js在uni-app的页面或组件中绘制族谱结构图。

代码示例

1. 引入D3.js

在pages/index/index.vue的<script>部分引入D3.js（这里假设使用CDN方式）：

<script>
export default {
  mounted() {
    this.drawFamilyTree();
  },
  methods: {
    drawFamilyTree() {
      const script = document.createElement('script');
      script.src = 'https://d3js.org/d3.v7.min.js';
      script.onload = () => {
        this.initD3();
      };
      document.head.appendChild(script);
    },
    initD3() {
      // D3.js 初始化代码，见下文
    }
  }
};
</script>

2. 准备数据

在initD3方法内定义族谱数据：

initD3() {
  const data = {
    name: "Root",
    children: [
      {
        name: "Child 1",
        children: [
          { name: "Grandchild 1-1" },
          { name: "Grandchild 1-2" }
        ]
      },
      { name: "Child 2" }
    ]
  };

  // D3.js 绘制代码，见下文
}

3. 绘制图谱

使用D3.js绘制族谱结构图：

initD3() {
  const data = /* 数据定义同上 */;
  const svg = d3.select("#family-tree-svg") // 假设有一个id为family-tree-svg的svg元素
    .attr("width", 960)
    .attr("height", 600);

  const treeLayout = d3.tree().size([960, 600]);
  const root = d3.hierarchy(data);
  treeLayout(root);

  svg.selectAll(".link")
    .data(root.links())
    .enter().append("path")
    .attr("class", "link")
    .attr("d", d3.linkHorizontal()
      .x(d => d.y)
      .y(d => d.x));

  svg.selectAll(".node")
    .data(root.descendants())
    .enter().append("g")
    .attr("class", "node")
    .attr("transform", d => `translate(${d.y},${d.x})`)
    .append("text")
    .attr("dy", 3)
    .attr("x", d => d.children ? -13 : 13)
    .style("text-anchor", d => d.children ? "end" : "start")
    .text(d => d.data.name);
}