d3.js实现组织架构图

最新推荐文章于 2024-06-11 09:47:16 发布

皮卡丘是个程序猿

最新推荐文章于 2024-06-11 09:47:16 发布

阅读量1k

点赞数 9

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_42530606/article/details/135285443

版权

本文详细介绍了如何使用d3.js库来实现一个组织架构图。首先展示了最终的展示效果，接着讲解了安装d3.js依赖的步骤，然后提供了具体的代码实现，最后给出了详细的参考链接以供深入学习。

摘要由CSDN通过智能技术生成

1、效果

在这里插入图片描述

2、安装依赖

npm install d3 --save-dev

3、粘贴代码

<template>
  <div id="appc" style="height: 650px"></div>
</template>
<script>
import * as $d3 from "d3";
export default {
   
  name: "legalperson",
  data() {
   
    return {
   
      d3: $d3,
      data: {
   
        id: "abc1005",
        // 根节点名称
        name: "山东吠舍科技有限责任公司",
        // 子节点列表
        children: [
          {
   
            id: "abc1006",
            name: "山东第一首陀罗科技服务有限公司",
            percent: "100%",
          },
          {
   
            id: "abc1007",
            name: "山东第二首陀罗程技术有限公司",
            percent: "100%",
          },
          {
   
            id: "abc1008",
            name: "山东第三首陀罗光伏材料有限公司",
            percent: "100%",
          },
          {
   
            id: "abc1009",
            name: "山东第四首陀罗科技发展有限公司",
            percent: "100%",
            children: [
              {
   
                id: "abc1010",
                name: "山东第一达利特瑞利分析仪器有限公司",
                percent: "100%",
                children: [
                  {
   
                    id: "abc1011",
                    name: "山东瑞利的子公司一",
                    percent: "80%",
                  },
                  {
   
                    id: "abc1012",
                    name: "山东瑞利的子公司二",
                    percent: "90%",
                  },
                  {
   
                    id: "abc1013",
                    name: "山东瑞利的子公司三",
                    percent: "100%",
                  },
                ],
              },
            ],
          },
          {
   
            id: "abc1014",
            name: "山东第五首陀罗电工科技有限公司",
            percent: "100%",
            children: [
              {
   
                id: "abc1015",
                name: "山东第二达利特低自动化设备有限公司",
                percent: "100%",
                children: [
                  {
   
                    id: "abc1016",
                    name: "山东敬业的子公司一",
                    percent: "100%",
                  },
                  {
   
                    id: "abc1017",
                    name: "山东敬业的子公司二",
                    percent: "90%",
                  },
                ],
              },
            ],
          },
          {
   
            id: "abc1020",
            name: "山东第六首陀罗分析仪器(集团)有限责任公司",
            percent: "100%",
            children: [
              {
   
                id: "abc1021",
                name: "山东第三达利特分气体工业有限公司",
              },
            ],
          },
        ],
        // 父节点列表
        parents: [
          {
   
            id: "abc2001",
            name: "山东刹帝利集团有限责任公司",
            percent: "60%",
            parents: [
              {
   
                id: "abc2000",
                name: "山东婆罗门集团有限公司",
                percent: "100%",
              },
            ],
          },
          {
   
            id: "abc2002",
            name: "吴小远",
            percent: "40%",
            parents: [
              {
   
                id: "abc1010",
                name: "山东第一达利特瑞利分析仪器有限公司",
                percent: "100%",
                parents: [
                  {
   
                    id: "abc1011",
                    name: "山东瑞利的子公司一",
                    percent: "80%",
                  },
                  {
   
                    id: "abc1012",
                    name: "山东瑞利的子公司二",
                    percent: "90%",
                  },
                  {
   
                    id: "abc1013",
                    name: "山东瑞利的子公司三",
                    percent: "100%",
                  },
                ],
              },
            ],
          },
          {
   
            id: "abc2003",
            name: "测试数据",
            percent: "40%",
          },
        ],
      },
    };
  },
  mounted() {
   
    this.constructor();
  },

  methods: {
   
    // 股权树
    constructor(options) {
   
      // 树的源数据
      this.originTreeData = this.data;
      // 宿主元素选择器
      this.el = document.getElementById("appc");
      // 一些配置项
      this.config = {
   
        // 节点的横向距离
        dx: 200,
        // 节点的纵向距离
        dy: 170,
        // svg的viewBox的宽度
        width: 0,
        // svg的viewBox的高度
        height: 500,
        // 节点的矩形框宽度
        rectWidth: 170,
        // 节点的矩形框高度
        rectHeight: 70,
      };
      this.svg = null;
      this.gAll = null;
      this.gLinks = null;
      this.gNodes = null;
      // 给树加坐标点的方法
      this.tree = null;
      // 投资公司树的根节点
      this.rootOfDown = null;
      // 股东树的根节点
      this.rootOfUp = null;
      this.drawChart({
   
        type: "fold",
      });
    },

    // 初始化树结构数据
    drawChart(options) {
   
      // 宿主元素的d3选择器对象
      let host = this.d3.select(this.el);
      // 宿主元素的DOM，通过node()获取到其DOM元素对象
      let dom = host.node();
      // 宿主元素的DOMRect
      let domRect = dom.getBoundingClientRect();
      // svg的宽度和高度
      this.config.width = domRect.width;
      this.config.height = domRect.height;
      let oldSvg = this.d3.select("svg");
      // 如果宿主元素中包含svg标签了，那么则删除这个标签，再重新生成一个
      if (!oldSvg.empty()) {
   
        oldSvg.remove();
      }
      const svg = this.d3
        .create("svg")
        .attr("viewBox", () => {
   
          let parentsLength = this.originTreeData.parents
            ? this.originTreeData.parents.length
            : 0;
          return [
            -this.config.width / 2,
            // 如果有父节点，则根节点居中，否则根节点上浮一段距离
            parentsLength > 0
              ? -this.config.height / 2
              : -this.config.height / 3,
            this.config.width,
            this.config.height,
          ];
        })
        .style("user-select", "none")
        .style("cursor", "move");

      // 包括连接线和节点的总集合
      const gAll = svg.append("g").attr("id", "all");
      svg
        .call(
          this.d3
            .zoom()
            .scaleExtent([0.2, 5])
            .on("zoom", (e) &