vue2 d3实现企查查股权穿透图股权结构图效果详解

标题：Vue2 + D3 实现企查查股权穿透图股权结构图效果详解

在本文中，我们将介绍如何通过 Vue2 和 D3 库实现企查查股权穿透图股权结构图效果。下面将分为以下几个步骤进行讲解：

1. 搭建项目环境
2. 导入 D3 库
3. 通过 D3 解析数据
4. 绘制股权穿透图
5. 美化股权穿透图

搭建项目环境

• 使用 VueCli 创建一个新项目
• 安装 ElementUI：npm install element-ui -S
• 安装 D3：npm install d3

导入 D3 库

在 Vue 组件中，可通过如下代码引入 D3 库：

import * as d3 from "d3";

通过 D3 解析数据

在绘制股权穿透图前，需要通过 D3 将原始股权数据转化为可供绘图使用的 JSON 数据。通常，股权数据的格式为树形结构，例如：

{
  "id": "A1",
  "name": "公司A1",
  "children": [
    {
      "id": "B1",
      "name": "公司B1",
      "children": [
        {
          "id": "C1",
          "name": "公司C1",
          "children": []
        }
      ]
    },
    {
      "id": "B2",
      "name": "公司B2",
      "children": []
    }
  ]
}

通过 D3 库中提供的 tree() 方法，可将以上格式的数据转化为 D3 树形结构，方便后面使用。示例代码如下：

// 创建 D3 树形布局对象
var tree = d3.tree();

// 加载原始股权数据
var orgData = {
  "id": "A1",
  "name": "公司A1",
  "children": [
    {
      "id": "B1",
      "name": "公司B1",
      "children": [
        {
          "id": "C1",
          "name": "公司C1",
          "children": []
        },
        {
          "id": "C2",
          "name": "公司C2",
          "children": []
        }
      ]
    },
    {
      "id": "B2",
      "name": "公司B2",
      "children": []
    }
  ]
};

// 将原始数据转化为 D3 树形结构
var treeData = d3.hierarchy(orgData);
tree(treeData);

绘制股权穿透图

在导入 D3 库后，我们可以通过 D3 提供的绘图 API，快速绘制出股权穿透图。以下为示例代码：

// 绘制股权穿透图
var svg = d3.select("svg");
var g = svg.append("g")
  .attr("transform", "translate(50,50)");

// 绘制节点
var nodes = g.selectAll(".node")
  .data(treeData.descendants())
  .enter()
  .append("g")
  .attr("class", function(d) {
    return "node" + (d.children ? " node--internal" : " node--leaf");
  })
  .attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  });

// 绘制节点文本
nodes.append("text")
  .attr("dy", "0.3em")
  .attr("x", function(d) {
    return d.children ? -8 : 8;
  })
  .style("text-anchor", function(d) {
    return d.children ? "end" : "start";
  })
  .text(function(d) {
    return d.data.name;
  });

// 绘制连接线
g.selectAll(".link")
  .data(treeData.descendants().slice(1))
  .enter()
  .append("path")
  .attr("class", "link")
  .attr("d", function(d) {
    return "M" + d.x + "," + d.y
        + "C" + (d.x + d.parent.x) / 2 + "," + d.y
        + " " + (d.x + d.parent.x) / 2 + "," + d.parent.y
        + " " + d.parent.x + "," + d.parent.y;
  });

美化股权穿透图

以上代码绘制出的股权穿透图效果较为简陋。下面将通过修改节点和连接线样式，使股权穿透图更美观。以下为示例代码：

// 设置样式
var linkWidth = 2; // 连接线宽度
var linkColor = "#ccc"; // 连接线颜色
var nodeRadius = 20; // 节点半径
var nodeStrokeWidth = 2; // 节点描边宽度
var nodeColor = "#fff"; // 节点颜色
var nodeStrokeColor = "steelblue"; // 节点描边颜色

// 绘制节点
var nodes = g.selectAll(".node")
  .data(treeData.descendants())
  .enter()
  .append("g")
  .attr("class", function(d) {
    return "node" + (d.children ? " node--internal" : " node--leaf");
  })
  .attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  });

nodes.append("circle")
  .attr("r", nodeRadius)
  .attr("stroke", nodeStrokeColor)
  .attr("stroke-width", nodeStrokeWidth)
  .attr("fill", nodeColor);

// 绘制节点文本
nodes.append("text")
  .attr("dy", "0.3em")
  .attr("x", function(d) {
    return d.children ? -8 : 8;
  })
  .style("text-anchor", function(d) {
    return d.children ? "end" : "start";
  })
  .text(function(d) {
    return d.data.name;
  });

// 绘制连接线
g.selectAll(".link")
  .data(treeData.descendants().slice(1))
  .enter()
  .append("path")
  .attr("class", "link")
  .attr("stroke", linkColor)
  .attr("stroke-width", linkWidth)
  .attr("fill", "none")
  .attr("d", function(d) {
    return "M" + d.x + "," + d.y
        + "C" + (d.x + d.parent.x) / 2 + "," + d.y
        + " " + (d.x + d.parent.x) / 2 + "," + d.parent.y
        + " " + d.parent.x + "," + d.parent.y;
  });

以上代码将连线改为实线，节点半径增大并添加描边效果，使股权穿透图更美观。

以上为实现股权穿透图的完整攻略，希望能对您有所帮助。