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

目录
  • 前言
    • 最终效果:
    • 版本信息:
    • 股权穿透图基础功能:
    • 股权结构图基础功能:
    • 股权穿透图代码
    • 股权结构图代码
  • 总结:

前言

umi+antd-admin 框架中使用hooks结合d3完成类似股权穿透图和股权结构图(web)

最终效果:

股权穿透图

股权结构图

版本信息:

"d3": "4.13.0",

"antd": "3.24.2",

"umi": "^2.7.7",

股权穿透图基础功能:

1、默认上下游信息展示,如果没有上下游信息只展示自己

2、点击请求子节点信息展示,收起子节点

3、全屏功能

4、放大器放大缩小(react项目中不知道为啥使用d3.zoom方法不好使,可能跟网页中滚动事件冲突有关,最后选择单独放置放大器进行放大缩小功能)

5、移动功能

股权结构图基础功能:

1、tab切换展示上游或下游信息

2、默认展示一层

3、点击请求子节点信息展示,收起子节点

代码链接: github.com/QiuDaShua/r…

股权穿透图代码

俺认为的关键都写在注释中了

import React,{ useEffect,useRef, useState} from 'react';
import { Col, Row, Slider, Spin,message } from 'antd';
import * as d3Chart from 'd3';
import fullScreen from '../../../../../../assets/fullScreen.png'
import { EncryptBase64 } from '../../../../../Common/Encrypt';
import { FetchEquityBelowInfo,FetchEquityUpperInfo } from '../../../../../../services/companysearch'
import { formatMoney } from '../../../../../../utils/splitMoney'
// 过渡时间
const DURATION = 0
// 加减符号半径
const SYMBOLA_S_R = 9
// 公司
const COMPANY = '0'
// 人
const PERSON = '1'
export default function RightPenetration(props){
  let state  = useRef({
      layoutTree: '',
      diamonds: '',
      d3: d3Chart,
      hasChildOpenNodeArr: [],
      originDiamonds: '',
      diagonalUp: '',
      diagonalDown: '',
      rootUp: '',
      rootDown: '',
      svg: '',
      svgH: 500,
      svgW: 1600,
  })
  const isFullRef = useRef()
  const [isFull,setIsFull] = useState(false)
  const [scaleN,setScaleN] = useState(1)
  const [tree,setTree] = useState({
    // 'name': '大公司',
    // 'id': '1',
    // 'children': [{
    //   'children': [],
    //   'money': 3000,
    //   'scale': 30,
    //   'name': '大公司黔西南分公司',
    //   'id': '1-1',
    //   'type': '0'
    // }, {
    //   'children': [],
    //   'money': 3000,
    //   'scale': 30,
    //   'name': '大公司六盘水分公司',
    //   'id': '1-2',
    //   'type': '0'
    // }, {
    //   'children': [],
    //   'money': 3000,
    //   'scale': 30,
    //   'name': '大公司贵阳分公司',
    //   'id': '1-3',
    //   'type': '0'
    // }, {
    //   'children': [],
    //   'money': 3000,
    //   'scale': 30,
    //   'name': '大公司安顺分公司',
    //   'id': '1-4',
    //   'type': '0'
    // }, {
    //   'children': [],
    //   'money': 3000,
    //   'scale': 30,
    //   'name': '大公司毕节分公司',
    //   'id': '1-5',
    //   'type': '0'
    // }, {
    //   'children': [],
    //   'money': 3000,
    //   'scale': 30,
    //   'name': '大公司遵义分公司',
    //   'id': '1-6',
    //   'type': '0'
    // }, {
    //   'children': [],
    //   'money': 3000,
    //   'scale': 30,
    //   'name': '大公司黔东南分公司',
    //   'id': '1-7',
    //   'type': '0'
    // }, {
    //   'children': [
    //     {'controlPerson': false, 'children': [], 'old': false, 'name': '大公司黔南分公司下属公司1', 'id': '1-8-1', 'money': 200, 'scale': 20, 'type': '0'},
    //     {'controlPerson': false, 'children': [], 'old': false, 'name': '大公司黔南分公司下属公司2', 'id': '1-8-2',  'money': 200, 'scale': 20, 'type': '0'},
    //   ],
    //   'money': 3000,
    //   'scale': 30,
    //   'name': '大公司铜仁分公司',
    //   'id': '1-8',
    //   'type': '0'
    // }, {
    //   'children': [
    //     {'controlPerson': false, 'children': [], 'old': false, 'name': '大公司黔南分公司下属公司1', 'id': '1-9-1',  'money': 200, 'scale': 20, 'type': '0'},
    //     {'controlPerson': false, 'children': [], 'old': false, 'name': '大公司黔南分公司下属公司2', 'id': '1-9-2',  'money': 200, 'scale': 20, 'type': '0'},
    //   ],
    //   'name': '大公司黔南分公司',
    //   'id': '1-9',
    //   'money': 3000,
    //   'scale': 30,
    //   'type': '0'
    //   }
    // ],
    // 'parents': [
    //   {
    //     'controlPerson': true,
    //     'money': '3000',
    //     'children': [
    //       {'controlPerson': true, 'money': '3000', 'children': [], 'parentMoney': 3000, 'old': true, 'id': '1-01-1', 'name': '发展公司父级公司1', 'scale': 30, 'type': '0', 'oldUrlName': ''},
    //       {'controlPerson': true, 'money': '3000', 'children': [], 'parentMoney': 3000, 'old': true, 'id': '2-01-1', 'name': '发展公司父级公司2', 'scale': 70, 'type': '0', 'oldUrlName': ''},
    //     ],
    //     'name': '发展公司',
    //     'id': '01-1',
    //     'scale': 90,
    //     'type': '0',
    //     'oldUrlName': ''
    //   }
    // ]
  })
  const [isLoading,setLoading] = useState(false)
  useEffect(() => {
    isFullRef.current = isFull
 }, [isFull])
  // 获取文字长度
  const getStringLength = (str) => {
    let realLength = 0, len = str.length, charCode = -1;
    for (let i = 0; i < len; i++) {
      charCode = str.charCodeAt(i);
      if (charCode >= 0 && charCode < 65){
        realLength += 1;
      }else if(charCode > 90 && charCode <= 128){
        realLength += 1;
      }else if(charCode >= 65 && charCode <= 90){
        realLength += 1.3;
      }else{
        realLength += 2;
      }
    }
    return realLength / 2;
  };
  // 连线
  const diagonal =(s, d, showtype) =>{
    // 曲线
    // if(s.x !== undefined && s.y !== undefined && d.x !== undefined && d.y !== undefined){
    //   let path
    //   if (showtype === 'up') {
    //     path = `M ${s.x} ${-s.y + 35}
    //   C${s.x} -${(s.y + d.y) * 0.45},
    //    ${s.x} -${(s.y + d.y) * 0.45},
    //     ${d.x} -${d.y}`;
    //   } else {
    //     path = `M ${s.x} ${s.y}
    //   C${s.x} ${(s.y + d.y) * 0.45},
    //    ${s.x} ${(s.y + d.y) * 0.45},
    //     ${d.x} ${d.y}`;
    //   }
    //   return path;
    // }
      // 折线
      var endMoveNum = 0;
      var moveDistance = 0;
      if (d) {
        if (showtype == 'down') {
          var downMoveNum =  d.depth ? state.current.diamonds.h/2 : state.current.originDiamonds.h/2 -10 ;
          // var downMoveNum =  30;
          let tmpNum = s.y + (d.y - s.y) / 2;
          endMoveNum = downMoveNum;
          moveDistance = tmpNum + endMoveNum;
        } else {
          var upMoveNum = d.depth ? 0 : -state.current.originDiamonds.h/2 +10 ;
          let tmpNum = d.y + (s.y - d.y) / 2;
          endMoveNum = upMoveNum;
          moveDistance = tmpNum + endMoveNum;
        }
      }
      if (showtype === 'up') {
        return (
          'M' +
          s.x +
          ',' +
          -s.y +
          'L' +
          s.x +
          ',' +
          -moveDistance +
          'L' +
          d.x +
          ',' +
          -moveDistance +
          'L' +
          d.x +
          ',' +
          -d.y
        );
      }else {
        return (
          'M' +
          s.x +
          ',' +
          s.y +
          'L' +
          s.x +
          ',' +
          moveDistance +
          'L' +
          d.x +
          ',' +
          moveDistance +
          'L' +
          d.x +
          ',' +
          d.y
        );
      }
  }
  // 拷贝到_children 隐藏1排以后的树 通过数组记录下已经展开的节点 使全屏前后展开的节点是一样的
  const collapse = (source) => {
    if (!state.current.hasChildOpenNodeArr.includes(source.data.id) && source.children) {
      source._children = source.children;
      // source._children.forEach(collapse);
      source.children = null;
    }
  }
  // 请求获取下游信息
  const getBelow = async (id) =>{
    setLoading(true)
    const dataSource = [];
    try{
      const response = await FetchEquityBelowInfo({
        instId: id,
        currentPage: 0,
        pageSize: 200,
      })
      const { records = [] } = response
      records.forEach(element =>{
      dataSource.push({
          isHaveChildren:null,
          money:element.amount ? formatMoney((element.amount / 10000).toFixed(2)) :'--',
          scale:element.hold_rati || '--%',
          name:element.chn_full_nm || '--',
          id:element.inst_cust_id || '--',
          type:'0'
        })
      })
      setLoading(false)
      return dataSource
    }catch(error){
      return dataSource
    }
  }
  // 请求获取上游信息
  const getUpper = async (id,regCapi) =>{
    setLoading(true)
    const dataSource = [];
    try{
      const response = await FetchEquityUpperInfo({
        instId: id,
        currentPage: 0,
        pageSize: 200,
        regCapi,
      })
      const { records = [] } = response
      records.forEach(element =>{
      dataSource.push({
          isHaveChildren:null,
          money:element.amount ? formatMoney((element.amount / 10000).toFixed(2)) :'--',
          scale:element.hold_rati || '--%',
          name:element.chn_full_nm || '--',
          id:element.inst_cust_id || '--',
          type:'0'
        })
      })
      setLoading(false)
      return dataSource
    }catch(error){
      return dataSource
    }
  }
  // 圆圈点击事件
  const click = async (source, showType,nodes) =>{
    // 数据全部请求回来的情况
    // if (source.depth) {
        // if(source.children){
        //   // 点击减号
        //   source._children = source.children;
        //   source.children = null;
        // }else {
        //   // 点击加号
        //   source.children = source._children;
        //   source._children = null;
        //   let gbox = document.getElementById('penetrateChart').childNodes[0].childNodes[0]
        //   let x = gbox.getAttribute('transform')
        //   const decompose = x.match(/translate((\S+),(\S+))/);
        //   const scale = x.match(/scale((\S+))/)
        //   if (Array.isArray(decompose) && Array.isArray(scale) && decompose[2] && scale[1]) {
        //     gbox.setAttribute(
        //       'transform',
        //       `translate(${parseFloat(decompose[1])},${parseFloat(+decompose[2]+ (showType === 'up'? 200:-200))}) scale(${parseFloat(scale[1])})`
        //     );
        //   }else{
        //     gbox.setAttribute(
        //       'transform',
        //       `translate(${parseFloat(decompose[1])},${parseFloat(+decompose[2]+(showType === 'up'? 200:-200))})`
        //     );
        //   }
        // }
      // }
       // 点击加号时才去请求节点信息的情况
        if(source.children){
          // 点击减号
          source._children = source.children;
          source.children = null;
          state.current.hasChildOpenNodeArr = state.current.hasChildOpenNodeArr.filter(item => item !== source.data.id)
        }else {
          // 点击加号
          state.current.hasChildOpenNodeArr.push(source.data.id);
          if(!source._children){
            let res = []
            if(showType === 'up'){
              res = await getUpper(source.data.id,source.data.regCapi)
            }else {
              res = await getBelow(source.data.id)
            }
            if(!res.length){
              message.warning('上游或下游企业信息为空!')
              return
            }
            res.forEach(item =>{
              let newNode = state.current.d3.hierarchy(item)
              newNode.depth = source.depth + 1;
              newNode.height = source.height - 1;
              newNode.parent = source;
              if(!source.children){
                source.children = [];
                source.data.children = [];
              }
              source.children.push(newNode);
              source.data.children.push(newNode.data);
            })
          }else{
            source.children = source._children;
            source._children = null;
          }
          // 点击后将节点移动到中间位置
          let gbox = document.getElementById('penetrateChart').childNodes[0].childNodes[0]
          let x = gbox.getAttribute('transform')
          const decompose = x.match(/translate((\S+),(\S+))/);
          const scale = x.match(/scale((\S+))/)
          let dy = showType === 'up' ? state.current.svgH/2 + nodes[0].y + source.y +10 : state.current.svgH/2 + nodes[0].y - source.y - 10
          let dx = state.current.svgW/2 + nodes[0].x - source.x
          if (Array.isArray(decompose) && Array.isArray(scale) && decompose[2] && scale[1]) {
            // gbox.setAttribute(
            //   'transform',
            //   `translate(${parseFloat(decompose[1])},${parseFloat(+decompose[2]+ (showType === 'up'? 200:-200))}) scale(${parseFloat(scale[1])})`
            // );
            state.current.svg.attr('transform', 'translate(' + dx + ',' + dy + ') scale(' + parseFloat(scale[1]) + ')');
          }else{
            // gbox.setAttribute(
            //   'transform',
            //   `translate(${parseFloat(decompose[1])},${parseFloat(+decompose[2]+(showType === 'up'? 200:-200))})`
            // );
            state.current.svg.attr('transform', 'translate(' + dx + ',' + dy + ')');
          }
        }
        update(source, showType)
    }
  /*
       *[update 函数描述], [click 函数描述]
       *  @param  {[Object]} source 第一次是初始源对象,后面是点击的对象
       *  @param  {[String]} showtype up表示向上 down表示向下
       *  @param  {[Object]} sourceTree 初始源对象
       */
  const update = (source, showtype) => {
        if (source.parents === null) {
          source.isOpen = !source.isOpen
        }
        let nodes
        if (showtype === 'up') {
          nodes = state.current.layoutTree(state.current.rootUp).descendants()
        } else {
          nodes = state.current.layoutTree(state.current.rootDown).descendants()
        }
        let links = nodes.slice(1);
        nodes.forEach(d => {
          d.y = d.depth * (d.depth == 1 ? 150: state.current.diamonds.intervalH);
        });
        let node = state.current.svg.selectAll('g.node' + showtype)
          .data(nodes, d => d.data.id || '');
        let nodeEnter = node.enter().append('g')
          .attr('class',  d => showtype === 'up' && !d.depth ? 'hide-node' : 'node' + showtype)
          .attr('transform', d => showtype === 'up' ? 'translate(' + d.x + ',' + -(d.y) + ')' : 'translate(' + d.x + ',' + d.y + ')')
          .attr('opacity',d => showtype === 'up' && !d.depth? (state.current.rootDown.data.children.length ? 0 : 1) : 1); // 拥有下部分则隐藏初始块  d => showtype === 'up' && !d.depth ? (state.current.rootDown.data.children.length ? 0 : 1) : 1
        // 创建矩形
        nodeEnter.append('rect')
          .attr('type', d => d.data.id+ '_' +d.depth)
          .attr('width', d => d.depth ? state.current.diamonds.w : getStringLength(d.data.name) * 22)
          .attr('height', d => d.depth ? (d.data.type === COMPANY ? state.current.diamonds.h : state.current.diamonds.h - 10) : state.current.originDiamonds.h)
          .attr('x', d => d.depth ? -state.current.diamonds.w / 2 : -getStringLength(d.data.name) * 22 / 2)
          .attr('y', d => d.depth ? showtype === 'up' ? -state.current.diamonds.h / 2 : 0 : -15)
          .attr('stroke', d => d.data.type === COMPANY || !d.depth ? '#DE4A3C' : '#7A9EFF')
          .attr('stroke-width', 1)
          .attr('rx', 10)
          .attr('ry', 10)
          .style('fill',d => {
            if (d.data.type === COMPANY || !d.depth) {
              return d.depth ? '#fff' : '#DE4A3C'
            } else if (d.data.type === PERSON) {
              return '#fff'
            }
          }
          );
        // 创建圆 加减
        let circle = nodeEnter.append('g')
        .attr('class', 'circle')
        .on('click', function (d) {
          click(d, showtype,nodes)
        });
        circle.append('circle')
          .attr('type', d => d.data.id+ '_' +d.depth || '')
          .attr('r', (d) => d.depth ? (d.data.isHaveChildren ? SYMBOLA_S_R : 0) : 0)
          .attr('cy', d => d.depth ? showtype === 'up' ? -(SYMBOLA_S_R + state.current.diamonds.h / 2) : state.current.diamonds.h + SYMBOLA_S_R : 0)
          .attr('cx', 0)
          .attr('fill', '#F9DDD9')
          .attr('stroke', '#FCEDEB')
          .style('stroke-width', 1)
        circle.append('text')
        .attr('x', 0)
        .attr('dy', d => d.depth ? (showtype === 'up' ? -(SYMBOLA_S_R / 2 + state.current.diamonds.h / 2) : state.current.diamonds.h + SYMBOLA_S_R + 4) : 0)
        .attr('text-anchor', 'middle')
        .attr('class', 'fa')
        .style('fill', '#DE4A3C')
        .text(function(d) {
          if(d.depth){
            if (d.children) {
              return '-';
            } else if (d._children || d.data.isHaveChildren) {
              return '+';
            } else {
              return '';
            }
          } else {
            return '';
          }
        })
        .style('font-size', '16px')
        .style('cursor', 'pointer');
        node.select('.fa')
        .text(function (d) {
          if (d.children) {
            return '-';
          } else if (d._children || d.data.isHaveChildren) {
            return '+';
          } else {
            return '';
          }
        })
        // 持股比例
        nodeEnter.append('g')
          .attr('transform', () => 'translate(0,0)')
          .append('text')
          .attr('x', 35)
          .attr('y', showtype === 'up' ? state.current.diamonds.h -20 : -10)
          .attr('text-anchor', 'middle')
          .attr('fill', d => d.data.type === COMPANY ? '#DE4A3C' : '#7A9EFF')
          .attr('opacity', d => !d.depth ? 0 : 1)
          .text(d => d.data.scale)
          .style('font-size', '14px')
          .style('font-family', 'PingFangSC-Regular')
          .style('font-weight', '400');
        // 公司名称
        // y轴 否表源头的字体距离
        nodeEnter.append('text')
          .attr('x', 0)
          .attr('y', d => {
            // 如果是上半部分
            if (showtype === 'up') {
              // 如果是1层以上
              if (d.depth) {
                return -state.current.diamonds.h / 2
              } else {
                // 如果名字长度大于12个
                // if (getStringLength(d.data.name) > 12) {
                //   return -5
                // }
                return 0
              }
            } else {
              if (d.depth) {
                return 0
              } else {
                // if (getStringLength(d.data.name) > 12) {
                //   return -5
                // }
                return 0
              }
            }
          })
          .attr('dy', d => d.depth ? (d.data.name.length > 12 ? '1.5em' : '2em') : `${state.current.originDiamonds.h/2 - 10}px`)
          .attr('text-anchor', 'middle')
          .attr('fill', d => d.depth ? '#DE4A3C' : '#fff')
          .text(d => d.depth ? (d.data.name.length > 12) ? d.data.name.substr(0, 12) : d.data.name :  d.data.name)
          .style('font-size', d => d.depth ? '16px' : '20px')
          .style('font-family', 'PingFangSC-Medium')
          .style('font-weight', '500')
          .style('cursor','pointer')
          .on('click', function (d) {
            if(d.data.id && d.depth){
              if(isFullRef.current){
                handleFullScreen()
              }
              // 点击操作
            }
          });
        // 名称过长 第二段
        nodeEnter.append('text')
          .attr('x', 0)
          .attr('y', d => {
             // ? (d.depth ? -this.diamonds.h / 2 : 0) : 0
            if (showtype === 'up') {
              if (d.depth) {
                return -state.current.diamonds.h / 2
              }
              return 8
            } else {
              if (!d.depth) {
                return 8
              }
              return 0
            }
          })
          .attr('dy', d => d.depth ? '3em' : '.3em')
          .attr('text-anchor', 'middle')
          .attr('fill', d => d.depth ? '#DE4A3C' : '#fff')
          .text(d => {
            // 索引从第22个开始截取有表示超出
            if(d.depth){
              if (d.data.name.substr(22, 1)) {
                return d.data.name.substr(12, 10) + '...'
              }
              return d.data.name.substr(12, 10)
            }else {
              return null
            }
          })
          .style('font-size', '16px')
          .style('font-family', 'PingFangSC-Medium')
          .style('font-weight', '500');
        // 认缴金额
        nodeEnter.append('text')
          .attr('x', 0)
          .attr('y', showtype === 'up' ? -state.current.diamonds.h / 2 : 0)
          .attr('dy', d => d.data.name.substr(12, d.data.name.length).length ? '5.5em' : '4.5em')
          .attr('text-anchor', 'middle')
          .attr('fill', d => d.depth ? '#465166' : '#fff')
          .text(d => d.data.money ? d.data.money.length > 20 ? `认缴金额:${d.data.money.substr(0,20)}…` : `认缴金额:${d.data.money}万元` : '')
          .style('font-size', '14px')
          .style('font-family', 'PingFangSC-Regular')
          .style('font-weight', '400')
          .style('color', '#3D3D3D');
        /*
        * 绘制箭头
        * @param  {string} markerUnits [设置为strokeWidth箭头会随着线的粗细发生变化]
        * @param {string} viewBox 坐标系的区域
        * @param {number} markerWidth,markerHeight 标识的大小
        * @param {string} orient 绘制方向,可设定为:auto(自动确认方向)和 角度值
        * @param {number} stroke-width 箭头宽度
        * @param {string} d 箭头的路径
        * @param {string} fill 箭头颜色
        * @param {string} id resolved0表示公司 resolved1表示个人
        * 直接用一个marker达不到两种颜色都展示的效果
        */
        nodeEnter.append('marker')
          .attr('id', showtype + 'resolved0')
          .attr('markerUnits', 'strokeWidth')
          .attr('markerUnits', 'userSpaceOnUse')
          .attr('viewBox', '0 -5 10 10')
          .attr('markerWidth', 12)
          .attr('markerHeight', 12)
          .attr('orient', '90')
          .attr('refX', () => showtype === 'up' ? '-50' : '10')
          .attr('stroke-width', 2)
          .attr('fill', '#DE4A3C')
          .append('path')
          .attr('d', 'M0,-5L10,0L0,5')
          .attr('fill', '#DE4A3C');
        nodeEnter.append('marker')
          .attr('id', showtype + 'resolved1')
          .attr('markerUnits', 'strokeWidth')
          .attr('markerUnits', 'userSpaceOnUse')
          .attr('viewBox', '0 -5 10 10')
          .attr('markerWidth', 12)
          .attr('markerHeight', 12)
          .attr('orient', '90')
          .attr('refX', () => showtype === 'up' ? '-50' : '10')
          .attr('stroke-width', 2)
          .append('path')
          .attr('d', 'M0,-5L10,0L0,5')
          .attr('fill', '#7A9EFF');
        // 将节点转换到它们的新位置。
        let nodeUpdate = node
          // .transition()
          // .duration(DURATION)
          .attr('transform', d => showtype === 'up' ? 'translate(' + d.x + ',' + -(d.y) + ')' : 'translate(' + d.x + ',' + (d.y) + ')');
        // 将退出节点转换到父节点的新位置.
        let nodeExit = node.exit()
          // .transition()
          // .duration(DURATION)
          .attr('transform', () => showtype === 'up' ? 'translate(' + source.x + ',' + -(source.y) + ')' : 'translate(' + source.x + ',' + (parseInt(source.y)) + ')')
          .remove();
        nodeExit.select('rect')
          .attr('width', state.current.diamonds.w)
          .attr('height', state.current.diamonds.h)
          .attr('stroke', 'black')
          .attr('stroke-width', 1);
        // 修改线条
        let link = state.current.svg.selectAll('path.link' + showtype)
          .data(links, d =>  d.data.id);
        // 在父级前的位置画线。
        let linkEnter = link.enter().insert('path', 'g')
          .attr('class', 'link' + showtype)
          .attr('marker-start', d => `url(#${showtype}resolved${d.data.type})`)// 根据箭头标记的id号标记箭头
          .attr('stroke', d => d.data.type === COMPANY ? '#DE4A3C' : '#7A9EFF')
          .style('fill-opacity', 1)
          .attr('fill', 'none')
          .attr('stroke-width', '1px')
          // .transition()
          // .duration(DURATION)
          .attr('d', () => {
            let o = {x: source.x0, y: source.y0};
            return diagonal(o, o, showtype)
          });
        let linkUpdate = linkEnter.merge(link);
        // 过渡更新位置.
        linkUpdate
          // .transition()
          // .duration(DURATION)
          .attr('d', d => diagonal(d, d.parent, showtype));
        // 将退出节点转换到父节点的新位置
        link.exit()
          // .transition()
          // .duration(DURATION)
          .attr('d', () => {
            let o = {
              x: source.x,
              y: source.y
            };
            return diagonal(o, o, showtype)
          }).remove();
        // 隐藏旧位置方面过渡.
        nodes.forEach(d => {
          d.x0 = d.x;
          d.y0 = d.y
        });
  }
  // 初始化
  const init = () =>{
      let d3 = state.current.d3
      let svgW = state.current.svgW
      let svgH = state.current.svgH
      // console.log('init',svgW, svgH)
      // 方块形状
      state.current.diamonds = {
        w: 240,
        h: 94,
        intervalW: 280,
        intervalH: 180
      }
      // 源头对象
      state.current.originDiamonds = {
        w: 240,
        h: 56,
      }
      state.current.layoutTree = d3.tree().nodeSize([state.current.diamonds.intervalW, state.current.diamonds.intervalH]).separation(() => 1);
      // 主图
      state.current.svg = d3.select('#penetrateChart').append('svg').attr('width', svgW).attr('height', svgH).attr('id', 'treesvg')
        .attr('style', 'position: relative;z-index: 2') // background-image:url(${setWatermark().toDataURL()})
        // .call(d3.zoom().scaleExtent([0.3, 3]).on('zoom', () => {
        //   state.current.svg.attr('transform', d3.event.transform.translate(svgW / 2, svgH / 2));
        // }))
        .append('g').attr('id', 'g').attr('transform', 'translate(' + (svgW / 2) + ',' + (svgH / 2) + ')')
        // 可以被拖动的功能
        var obox = document.getElementById('penetrateChart').childNodes[0];
        var gbox = document.getElementById('penetrateChart').childNodes[0].childNodes[0];
        obox.addEventListener('mousedown', function (evt) {
          // 点击时候停止
          document.onclick = function () {
            document.onmousemove = null;
            document.onmouseup = null;
          };
          var oEvent = evt // 获取事件对象,这个是兼容写法
          var disX = oEvent.clientX;
          var disY = oEvent.clientY;
          // let arr = gbox.getAttribute('transform')
          //   .replace('translate(', '')
          //   .replace(')', '')
          //   .split(',');
          let x = gbox.getAttribute('transform')
          const decompose = x.match(/translate((\S+),(\S+))/)
          const scale = x.match(/scale((\S+))/)
          // 这里就解释为什么要给document添加onmousemove时间,原因是如果你给obox添加这个事件的时候,当你拖动很快的时候就很快脱离这个onmousemove事件,而不能实时拖动它
          document.onmousemove = function (evt) {
            // 实时改变目标元素obox的位置
              var oEvent = evt
              if (Array.isArray(decompose) && Array.isArray(scale) && decompose[2] && scale[1]) {
                gbox.setAttribute(
                  'transform',
                  `translate(${oEvent.clientX - disX + parseFloat(decompose[1])},${oEvent.clientY - disY + parseFloat(decompose[2])}) scale(${parseFloat(scale[1])})`
                );
              }else{
                gbox.setAttribute(
                  'transform',
                  `translate(${oEvent.clientX - disX + parseFloat(decompose[1])},${oEvent.clientY - disY + parseFloat(decompose[2])})`
                );
              }
              // 停止拖动
              document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
              };
            }
          })
         // 拷贝树的数据
          let upTree = null
          let downTree = null
          Object.keys(tree).map(item => {
            if (item === 'parents') {
              upTree = JSON.parse(JSON.stringify(tree))
              upTree.children = tree[item]
              upTree.parents = null
            } else if (item === 'children') {
              downTree = JSON.parse(JSON.stringify(tree))
              downTree.children = tree[item]
              downTree.parents = null
            }
          })
            // hierarchy 返回新的结构 x0,y0初始化起点坐标
            state.current.rootUp = d3.hierarchy(upTree, d => d.children)
            state.current.rootDown =  d3.hierarchy(downTree, d => d.children)
            state.current.rootUp.x0 = 0
            state.current.rootUp.y0 = 0
            state.current.rootDown.x0 = 0
            state.current.rootDown.y0 = 0;
          // 上 和 下 结构
          let treeArr = [
            {
              data: state.current.rootUp,
              type: 'up'
            },
            {
              data: state.current.rootDown,
              type: 'down'
            }
          ]
          if(!tree['children'].length && !tree['parents'].length){
            updataSelf()
          }else{
            treeArr.map(item => {
              if (item.data.children) {
                item.data.children.forEach(collapse);
                update(item.data, item.type, item.data)
              }
            })
          }
  }
  const updataSelf = () =>{
    let nodes = state.current.rootUp.descendants()
    let node = state.current.svg.selectAll('g.node')
      .data(nodes, d => d.data.id || '');
    let nodeEnter = node.enter().append('g')
      .attr('class', d => 'node node_' + d.depth) //d => showtype === 'up' && !d.depth ? 'hide-node' :
      // .attr('transform', 'translate(' + (svgW / 2) + ',' + (svgH / 2) + ')')
      .attr('opacity', 1); // 拥有下部分则隐藏初始块  d => showtype === 'up' && !d.depth ? (state.current.rootDown.data.children.length ? 0 : 1) : 1
    // 创建矩形
    nodeEnter.append('rect')
      .attr('type', d => d.data.id + '_' + d.depth)
      .attr('width', d => d.depth ? state.current.diamonds.w : getStringLength(d.data.name) * 22)
      .attr('height', d => d.depth ? (d.data.type === COMPANY ? state.current.diamonds.h : state.current.diamonds.h - 10) : state.current.originDiamonds.h)
      .attr('x', d => d.depth ? -state.current.diamonds.w / 2 : -getStringLength(d.data.name) * 22 / 2)
      .attr('y', d => d.depth ?  0 : -15)
      .attr('stroke', '#DE4A3C')
      .attr('stroke-width', 1)
      .attr('rx', 10)
      .attr('ry', 10)
      .style('fill',d => {
        if (d.data.type === COMPANY || !d.depth) {
          return d.depth ? '#fff' : '#DE4A3C'
        } else if (d.data.type === PERSON) {
          return '#fff'
        }
      });
      // 文字
      nodeEnter.append('text')
        .attr('x', 0)
        .attr('y', 0)
        .attr('dy', `${state.current.originDiamonds.h/2 - 10}px`)
        .attr('text-anchor', 'middle')
        .attr('fill', d => d.depth ? '#DE4A3C' : '#fff')
        .text(d => d.data.name)
        .style('font-size', d => d.depth ? '16px' : '20px')
        .style('font-family', 'PingFangSC-Medium')
        .style('font-weight', '500')
  }
  // 设置图片水印
  const setWatermark = () =>{
    // 设置水印
    let user = JSON.parse(sessionStorage.getItem('user')) || { name :'' , loginName :''}
    const waterMarkText = `${user.name} ${user.loginName}`
    const canvas = document.createElement('canvas')
    canvas.width = 200
    canvas.height = 150
    const ctx = canvas.getContext('2d')
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    ctx.globalAlpha = 0.09
    ctx.font = '16px sans-serif'
    ctx.translate(70,90)
    ctx.rotate(-Math.PI / 4)
    ctx.fillText(waterMarkText, 0, 0)
    return canvas
  }
  // 全屏 退出全屏
  const handleFullScreen = () =>{
    const element = document.getElementById('comChartOne');
    if(!isFullRef.current){
      setIsFull(true)
      setScaleN(1)
      if (element.requestFullScreen) { // HTML W3C 提议
        element.requestFullScreen();
      } else if (element.msRequestFullscreen) { // IE11
        element.msRequestFullScreen();
      } else if (element.webkitRequestFullScreen) { // Webkit (works in Safari5.1 and Chrome 15)
        element.webkitRequestFullScreen();
      } else if (element.mozRequestFullScreen) { // Firefox (works in nightly)
        element.mozRequestFullScreen();
      }
      state.current.svgW = document.documentElement.clientWidth
      state.current.svgH = document.documentElement.clientHeight + 300
      element.style.backgroundImage = `url(${setWatermark().toDataURL()})`
    }else {
      // 退出全屏
      setIsFull(false)
      setScaleN(1)
      if (element.requestFullScreen) {
        document.exitFullscreen();
      } else if (element.msRequestFullScreen) {
        document.msExitFullscreen();
      } else if (element.webkitRequestFullScreen) {
        document.webkitCancelFullScreen();
      } else if (element.mozRequestFullScreen) {
        document.mozCancelFullScreen();
      }
      state.current.svgW = 1600
      state.current.svgH = 500
    }
    resetSvg()
  }
  // 倍数改变
  const onScaleChange = (value) => {
    setScaleN(value)
    let gbox = document.getElementById('penetrateChart').childNodes[0].childNodes[0]
    let x = gbox.getAttribute('transform')
    const decompose = x.match(/translate((\S+),(\S+))/);
    if (Array.isArray(decompose) && decompose[2]) {
      gbox.setAttribute('transform',`translate(${parseFloat(decompose[1])},${parseFloat(decompose[2])}) scale(${value})`)
    }
  }
  // 重置画面
  const resetSvg =() =>{
    state.current.d3.select('#treesvg').remove()
    init()
  }
  const { treeData } = props
  useEffect(()=>{
    if(treeData.name){
      setTree(treeData)
    }
  },[treeData])
  useEffect(()=>{
    if(tree.name){
      init()
    }
  },[tree]) // eslint-disable-line react-hooks/exhaustive-deps
    return (
      <div  id="comChartOne" style={{backgroundColor:'white'}}>
        <Spin spinning={isLoading}>
          <Row>
            <Col className="left">
              <Slider style={{ width: '20rem' }} min={0.3} max={2} step={0.1} defaultValue={1} onChange={onScaleChange} value={scaleN} />
            </Col>
            <Col className="right">
              <div onClick={handleFullScreen} style={{fontSize: '16px',color: '#DE4A3C', lineHeight:'22px',cursor:'pointer'}}>
                <img alt="" style={{width: '22px'}} src={fullScreen}/>
                {isFull ? '退出全屏':'全屏'}
              </div>
            </Col>
          </Row>
          <div id="penetrateChart" style={{width: '100%', display: 'block', margin:9;auto'}}>
          </div>
        </Spin>
      </div>
    );
  }

股权结构图代码

import React,{ useEffect,useRef, useState} from 'react';
import { Col, Row, Slider, Spin,message } from 'antd';
import * as d3Chart from 'd3';
import fullScreen from '../../../../../../assets/fullScreen.png'
import styles from './index.less';
import { EncryptBase64 } from '../../../../../Common/Encrypt';
import { FetchEquityUpperInfo } from '../../../../../../services/companysearch'
import { formatMoney } from '../../../../../../utils/splitMoney'

// 过渡时间
const DURATION = 400
// 加减符号半径
const SYMBOLA_S_R = 9
// // 公司
// const COMPANY = '0'
// // 人
// const PERSON = '1'

export default function RightStructureUp(props){
  let state  = useRef({
      diamonds: '',
      originDiamonds: '',
      d3: d3Chart,
      hasChildOpenNodeArr: [],
      root: '',
      svg: '',
      svgH: 500,
      svgW: 1600,
      lastClickD:null,
  })

  const isFullRef = useRef()
  const [isFull,setIsFull] = useState(false)
  const [scaleN,setScaleN] = useState(1)
  const [tree,setTree] = useState({
    // 'name': '马云',
    // 'tap': '节点',
    // 'id': '1',
    // 'children': [
    //   {
    //     'name': '中国平安人寿保险股份有限公司自有资金马云的公司厉害得很',
    //     'scale': '2.27',
    //     'id': '1-1',
    //     'money': '3000',
    //     'children': [
    //       {
    //         'name': '中国证券金融股份有限公司',
    //         'scale': '2.27',
    //         'id': '1-1-1',
    //         'money': '3000',
    //         'children': [
    //           {
    //             'name': '中国证券金融股份有限公司',
    //             'scale': '2.27',
    //             'id': '1-1-1-1',
    //             'money': '3000',
    //           }
    //         ]
    //       },
    //       {
    //         'name': '中央汇金资产管理有限责任公司',
    //         'scale': '2.27',
    //         'id': '1-1-2',
    //         'money': '3000',
    //       }
    //     ]
    //   }
    // ]
    })
  const [isLoading,setLoading] = useState(false)

  useEffect(() => {
    isFullRef.current = isFull
  }, [isFull])

  // 获取文字长度
  const getStringLength = (str) => {
    let realLength = 0, len = str.length, charCode = -1;
    for (let i = 0; i < len; i++) {
      charCode = str.charCodeAt(i);
      if (charCode >= 0 && charCode < 65){
        realLength += 1;
      }else if(charCode > 90 && charCode <= 128){
        realLength += 1;
      }else if(charCode >= 65 && charCode <= 90){
        realLength += 1.2;
      }else{
        realLength += 2;
      }
    }
    return realLength / 2;
  };

  const diagonal = (d) =>{
    return `M ${d.source.y} ${d.source.x}
        H ${(d.source.y + (d.target.y-d.source.y)/2)}
        V ${d.target.x}
        H ${d.target.y}`;
  }

  // 拷贝到_children 隐藏1排以后的树
  const collapse = (source) => {
    if (!state.current.hasChildOpenNodeArr.includes(source.data.id) && source.children) {
      source._children = source.children;
      // source._children.forEach(collapse);
      source.children = null;
    }
  }

  // 获取上游信息
  const getUpper = async (id,regCapi) =>{
    setLoading(true)
    const dataSource = [];
    try{
      const response = await FetchEquityUpperInfo({
        instId: id,
        currentPage: 0,
        pageSize: 200,
        regCapi,
      })
      const { records = [] } = response
      records.forEach(element =>{
      dataSource.push({
          isHaveChildren:null,
          money:element.amount ? formatMoney((element.amount / 10000).toFixed(2)) :'--',
          scale:element.hold_rati || '--%',
          name:element.chn_full_nm || '--',
          id:element.inst_cust_id || '--',
          type:'0'
        })
      })
      setLoading(false)
      return dataSource
    }catch(error){
      return dataSource
    }
  }

  const click = async(d) =>{
      // if (d.children) {
      //   d._children = d.children;
      //   d.children = null;
      // } else {
      //   d.children = d._children;
      //   d._children = null;
      // }
      // if (state.current.lastClickD){
      //   state.current.lastClickD._isSelected = false;
      // }
      // d._isSelected = true;
      // state.current.lastClickD = d;
      if(d.children){
        // 点击减号
        d._children = d.children;
        d.children = null;
        state.current.hasChildOpenNodeArr = state.current.hasChildOpenNodeArr.filter(item => item !== d.data.id)
      }else {
        // 点击加号
        state.current.hasChildOpenNodeArr.push(d.data.id);
        if(!d._children){
          let res = []
          res = await getUpper(d.data.id,d.data.regCapi)
          if(!res.length){
            message.warning('上游或下游企业信息为空!')
            return
          }
          res.forEach(item =>{
            let newNode = state.current.d3.hierarchy(item)
            newNode.depth = d.depth + 1;
            newNode.height = d.height - 1;
            newNode.parent = d;
            if(!d.children){
              d.children = [];
              d.data.children = [];
            }
            d.children.push(newNode);
            d.data.children.push(newNode.data);
          })
        }else{
          d.children = d._children;
          d._children = null;
        }
      }
      update(d)
  }

  /*
       *[update 函数描述], [click 函数描述]
       *  @param  {[Object]} source 第一次是初始源对象,后面是点击的对象
       *  @param  {[String]} showtype up表示向上 down表示向下
       *  @param  {[Object]} sourceTree 初始源对象
       */
  const update = (source) => {        

        let nodes = state.current.root.descendants()

        let index = -1, count = 0;
        state.current.root.eachBefore(function(n) {
          count+=20;
          n.style = 'node_' + n.depth;
          n.x = ++index * state.current.diamonds.h + count;
          n.y = n.depth * 37; // 设置下一层水平位置向后移37px
        });

        let node = state.current.svg.selectAll('g.node')
          .data(nodes, d => d.data.id || '');

        let nodeEnter = node.enter().append('g')
          .attr('class', d => 'node node_' + d.depth)
          .attr('transform', 'translate(' + source.y0 + ',' + source.x0 + ')')
          .attr('opacity', 0);
        // 创建矩形
        nodeEnter.append('rect')
          .attr('type', d => d.data.id)
          .attr('width', d => d.depth ? state.current.diamonds.w : (getStringLength(d.data.name) * 20 + 20) )
          .attr('height', d => d.depth ? state.current.diamonds.h : state.current.originDiamonds.h)
          .attr('y', -state.current.diamonds.h / 2)
          .attr('stroke', '#DE4A3C')
          .attr('stroke-width', 1)
          .attr('rx', 6)
          .attr('ry', 6)
          .style('fill',d => {
            return d.data.tap ? '#DE4A3C' : '#fff'
          }
          );

          nodeEnter.append('rect')
          .attr('y', -state.current.diamonds.h / 2)
          .attr('height', d => d.depth ? state.current.diamonds.h : state.current.originDiamonds.h)
          .attr('width', 6)
          .attr('rx', 6)
          .attr('ry', 6)
          .style('fill', '#DE4A3C')

          // 文字
          nodeEnter.append('text')
            .attr('dy', d=> d.depth ? -7 : -5)
            .attr('dx', d=> d.depth ? 36 : 10)
            .style('font-size', d=> d.depth ? '16px' : '20px')
      .style('font-weight', '500')
      .attr('fill', d =>  d.depth ? '#333333' : '#fff')
            .text(function(d) {
        // 名字长度超过进行截取
        if(d.depth){
          if(d.data.name.length>22){
            return    d.data.name.substring(0, 22) + '...';
          }
        }
                return d.data.name;
            })
      .style('cursor', 'pointer')
      .on('click', function (d) {
        if(d.data.id && d.depth){
          if(isFullRef.current){
            handleFullScreen()
          }
          // 操作点击打开新页面
        }
      });

        // 持股比例
            nodeEnter.append('text')
        .attr('dy', 17)
        .attr('dx', 36)
        .style('font-size', '14px')
        .style('fill', '#666666')
        .text(function(d) {
          if(!d.data.tap){
            return ('持股比例' +':')
          }
        });

        nodeEnter.append('text')
        .attr('dy', 17)
        .attr('dx', 98)
        .style('font-size', '14px')
        .style('fill', '#DE4A3C')
        .text(function(d) {
          if(!d.data.tap){
            return (d.data.scale)
          }
        });

        // 认缴金额
        nodeEnter.append('text')
        .attr('dy', 17)
        .attr('dx', 170)
        .style('font-size', '14px')
        .style('fill', '#666666')
        .text(function(d) {
          if(!d.data.tap){
            return ('认缴金额' + ':')
          }
        });

        nodeEnter.append('text')
        .attr('dy', 17)
        .attr('dx', 240)
        .style('font-size', '14px')
        .style('fill', '#DE4A3C')
        .text(function(d) {
          if(!d.data.tap){
            if(d.data.money.length > 20){
              return  d.data.money.substr(0, 20) + '...'
            }else{
              return (d.data.money + '万元')
            }
          }
        });

        // 创建圆 加减
        let circle = nodeEnter.append('g')
        .attr('class', 'circle')
        .on('click', click);

        circle.append('circle')
                .style('fill', '#F9DDD9')
                .style('stroke', '#FCEDEB')
                .style('stroke-width', 1)
                .attr('r', function (d) {
                  if(d.depth){
                    if (d.children || d.data.isHaveChildren) {
                      return 9;
                    } else {
                      return 0;
                    }
                  }else {
                    return 0
                  }
                })
                .attr('cy', d => d.depth ? 0 : (-SYMBOLA_S_R -3))
                .attr('cx', 20)
                .style('cursor', 'pointer')

        circle.append('text')
          .attr('dy', d => d.depth ? 4.5 : -7)
          .attr('dx', 20)
          .attr('text-anchor', 'middle')
          .attr('class', 'fa')
          .style('fill', '#DE4A3C')
          .text(function(d) {
            if(d.depth){
              if (d.children) {
                return '-';
              } else if (d._children || d.data.isHaveChildren) {
                return '+';
              } else {
                return '';
              }
            }else {
              return ''
            }
          })
          .style('font-size', '16px')
          .style('cursor', 'pointer');

        node.select('.fa')
        .text(function (d) {
          if(d.depth){
            if (d.children) {
              return '-';
            } else if (d._children || d.data.isHaveChildren) {
              return '+';
            } else {
              return '';
            }
          }else {
            return ''
          }
        })

    /*
        * 绘制箭头
        * @param  {string} markerUnits [设置为strokeWidth箭头会随着线的粗细发生变化]
        * @param {string} viewBox 坐标系的区域
        * @param {number} markerWidth,markerHeight 标识的大小
        * @param {string} orient 绘制方向,可设定为:auto(自动确认方向)和 角度值
        * @param {number} stroke-width 箭头宽度
        * @pmarker-endaram {string} d 箭头的路径
        * @param {string} fill 箭头颜色
        */
        // nodeEnter.append('marker')
        //   .attr('id', 'resolvedIn')
        //   .attr('markerUnits', 'strokeWidth')
        //   .attr('markerUnits', 'userSpaceOnUse')
        //   .attr('viewBox', '0 -5 10 10')
        //   .attr('markerWidth', 12)
        //   .attr('markerHeight', 12)
        //   .attr('orient', '0')
        //   .attr('refX', '10')
        //   // .attr('refY', '10')
        //   .attr('stroke-width', 2)
        //   .attr('fill', '#DE4A3C')
        //   .append('path')
        //   .attr('d', 'M0,-5L10,0L0,5')
        //   .attr('fill', '#DE4A3C');

        // 将节点转换到它们的新位置。
        nodeEnter
          // .transition()
          // .duration(DURATION)
          .attr('transform', function(d) { return 'translate(' + d.y + ',' + d.x + ')'; })
          .style('opacity', 1);

        node
        // .transition()
        // .duration(DURATION)
        .attr('transform', function(d) { return 'translate(' + d.y + ',' + d.x + ')'; })
        .style('opacity', 1)
        .select('rect');

        // 将退出节点转换到父节点的新位置.
        let nodeExit = node.exit()
          // .transition()
          // .duration(DURATION)
          .attr('transform', () => 'translate(' + source.y + ',' + (parseInt(source.x)) + ')')
          .style('opacity', 0)
          .remove();

        // 修改线条
        let link = state.current.svg.selectAll('path.link')
          .data(state.current.root.links(), d => d.target.id);

        // 在父级前的位置画线。
        let linkEnter = link.enter().insert('path', 'g')
          .attr('class', d => 'link link_' + d.target.depth)
          // .attr('marker-end', `url(#resolvedIn)`)// 根据箭头标记的id号标记箭头
          .attr('stroke', '#DE4A3C')
          .style('fill-opacity', 1)
          .attr('fill', 'none')
          .attr('stroke-width', '1px')
          .attr('d', () => {
            let o = {x: source.x0, y: source.y0};
            return diagonal({source: o, target: o})
          })
          // .transition()
          // .duration(DURATION)
          .attr('d', diagonal);

        // 过渡更新位置.
        link
          // .transition()
          // .duration(DURATION)
          .attr('d', diagonal);

        // 将退出节点转换到父节点的新位置
        link.exit()
          // .transition()
          // .duration(DURATION)
          .attr('d', () => {
            let o = {
              x: source.x,
              y: source.y
            };
            return diagonal({source: o, target: o})
          }).remove();

        // 隐藏旧位置方面过渡.
        state.current.root.each(d => {
          d.x0 = d.x;
          d.y0 = d.y
        });
  }    

  const init = () =>{
    // console.log('init',tree)
    let d3 = state.current.d3
    // 强制横屏 所以取反
    let svgW = state.current.svgW
    let svgH = state.current.svgH
    let margin = {top: 20, right: 20, bottom: 30, left: 10}
    // 方块形状
    state.current.diamonds = {
      w: 410,
      h: 72,
    }
    // 源头对象
    state.current.originDiamonds = {
      w: 224,
      h: 52
    }

    // 主图
    state.current.svg = d3.select('#structureChartUp').append('svg').attr('width', svgW).attr('height', svgH).attr('id', 'treesvgUp')
      .attr('style', 'position: relative;z-index: 2') // background-image:url(${setWatermark().toDataURL()})
      // .call(d3.zoom().scaleExtent([0.3, 3]).on('zoom', () => {
      //   state.current.svg.attr('transform', d3.event.transform.translate(svgW / 2, svgH / 2));
      // }))
      .append('g').attr('id', 'gUp').attr('transform', `translate(${svgW / 3},${margin.top})`)

      // 可以被拖动的功能
      var obox = document.getElementById('structureChartUp').childNodes[0];
      var gbox = document.getElementById('structureChartUp').childNodes[0].childNodes[0];
      obox.addEventListener('mousedown', function (evt) {
        // 点击时候停止
        document.onclick = function () {
          document.onmousemove = null;
          document.onmouseup = null;
        };
        var oEvent = evt // 获取事件对象,这个是兼容写法
        var disX = oEvent.clientX;
        var disY = oEvent.clientY;
        // let arr = gbox.getAttribute('transform')
        //   .replace('translate(', '')
        //   .replace(')', '')
        //   .split(',');
        let x = gbox.getAttribute('transform')
        const decompose = x.match(/translate((\S+),(\S+))/)
        const scale = x.match(/scale((\S+))/)

        // 这里就解释为什么要给document添加onmousemove时间,原因是如果你给obox添加这个事件的时候,当你拖动很快的时候就很快脱离这个onmousemove事件,而不能实时拖动它
        document.onmousemove = function (evt) {
          // 实时改变目标元素obox的位置
            var oEvent = evt
            if (Array.isArray(decompose) && Array.isArray(scale) && decompose[2] && scale[1]) {
              gbox.setAttribute(
                'transform',
                `translate(${oEvent.clientX - disX + parseFloat(decompose[1])},${oEvent.clientY - disY + parseFloat(decompose[2])}) scale(${parseFloat(scale[1])})`
              );
            }else{
              gbox.setAttribute(
                'transform',
                `translate(${oEvent.clientX - disX + parseFloat(decompose[1])},${oEvent.clientY - disY + parseFloat(decompose[2])})`
              );
            }
            // 停止拖动
            document.onmouseup = function () {
              document.onmousemove = null;
              document.onmouseup = null;
            };
          }
        })

        // 拷贝树的数据
        let downTree = null
        Object.keys(tree).map(item => {
          if (item === 'children') {
            downTree = JSON.parse(JSON.stringify(tree))
            downTree.children = tree[item]
          }
        })
          // hierarchy 返回新的结构 x0,y0初始化起点坐标
          state.current.root = d3.hierarchy(downTree)
          state.current.root.x0 = 0
          state.current.root.y0 = 0
          if(!state.current.root.children){
            // console.log(tree['children'].length,state.current.root.children)
            update(state.current.root)
          }else {
            state.current.root.children.forEach(collapse);
            update(state.current.root)
          }
  }

  // 设置图片水印
  const setWatermark = () =>{
    // 设置水印
    let user = JSON.parse(sessionStorage.getItem('user')) || { name :'' , loginName :''}
    const waterMarkText = `${user.name} ${user.loginName}`
    const canvas = document.createElement('canvas')
    canvas.width = 200
    canvas.height = 150
    const ctx = canvas.getContext('2d')
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    ctx.globalAlpha = 0.09
    ctx.font = '16px sans-serif'
    ctx.translate(70,90)
    ctx.rotate(-Math.PI / 4)
    ctx.fillText(waterMarkText, 0, 0)

    return canvas
  }

  // 全屏 退出全屏
  const handleFullScreen = () =>{
    const element = document.getElementById('comChartUp');
    if(!isFullRef.current){
      if (element.requestFullScreen) { // HTML W3C 提议
        element.requestFullScreen();
      } else if (element.msRequestFullscreen) { // IE11
        element.msRequestFullScreen();
      } else if (element.webkitRequestFullScreen) { // Webkit (works in Safari5.1 and Chrome 15)
        element.webkitRequestFullScreen();
      } else if (element.mozRequestFullScreen) { // Firefox (works in nightly)
        element.mozRequestFullScreen();
      }
      state.current.svgW = document.documentElement.clientWidth
      state.current.svgH = document.documentElement.clientHeight + 300
      element.style.backgroundImage = `url(${setWatermark().toDataURL()})`
      setIsFull(true)
      setScaleN(1)
    }else {
      // 退出全屏
      if (element.requestFullScreen) {
        document.exitFullscreen();
      } else if (element.msRequestFullScreen) {
        document.msExitFullscreen();
      } else if (element.webkitRequestFullScreen) {
        document.webkitCancelFullScreen();
      } else if (element.mozRequestFullScreen) {
        document.mozCancelFullScreen();
      }
      state.current.svgW = 1600
      state.current.svgH = 500
      setIsFull(false)
      setScaleN(1)
    }
    resetSvg()
  }

  // 重置画面
  const resetSvg =() =>{
    state.current.d3.select('#treesvgUp').remove()
    init()
  }

  // 倍数改变
  const onScaleChange = (value) => {
    setScaleN(value)
    let gbox = document.getElementById('structureChartUp').childNodes[0].childNodes[0]
    let x = gbox.getAttribute('transform')
    const decompose = x.match(/translate((\S+),(\S+))/);
    if (Array.isArray(decompose) && decompose[2]) {
      gbox.setAttribute('transform',`translate(${parseFloat(decompose[1])},${parseFloat(decompose[2])}) scale(${value})`)
    }
  }

  const { treeData } = props
  useEffect(()=>{
    if(treeData.name){
      // console.log(treeData,'treeData')
      let temp = {...treeData}
      temp.children = temp.parents
      temp.parents = null
      setTree(temp)
    }
  },[treeData])

  useEffect(()=>{
    if(tree.name){
      init()
    }
  },[tree]) // eslint-disable-line react-hooks/exhaustive-deps

    return (
      <div  id="comChartUp" style={{backgroundColor:'white'}}>
        <Spin spinning={isLoading}>
          <Row style={{height:'35px'}}>
            <Col className="left">
              <Slider style={{ width: '20rem' }} min={0.3} max={2} step={0.1} defaultValue={1} onChange={onScaleChange} value={scaleN} />
            </Col>
            <Col className="right">
              <div onClick={handleFullScreen} style={{fontSize: '16px',color: '#DE4A3C', lineHeight:'22px',cursor:'pointer'}}>
                <img alt="" style={{width: '22px'}} src={fullScreen}/>
                {isFull ? '退出全屏':'全屏'}
              </div>
            </Col>
          </Row>
          <div id="structureChartUp" style={{width: '100%', display: 'block', margin:'auto'}}>
          </div>
        </Spin>
      </div>
    );
  }

总结:

前端小白一枚,在之前只使用过echarts进行可视化,在开发这个功能时候发现d3版本中文网站内容较少,基本出现问题讨论也是在外文网站,踩过一堆版本的坑,最终选择稳定且例子比较多的v4版本。 并且查找时发现大部分例子基本都是默认信息展示,很少有点击请求子节点展示的功能,所以最终进行一个最终功能的整合

以上就是react hooks d3实现企查查股权穿透图结构图效果详解的详细内容,更多关于react hooks d3股权穿透图结构图的资料请关注我们其它相关文章!

(0)

相关推荐

  • React Hooks核心原理深入分析讲解

    目录 Hooks 闭包 开始动手实现 将useState应用到组件中 过期闭包 模块模式 实现useEffect 支持多个Hooks Custom Hooks 重新理解Hooks规则 React Hooks已经推出一段时间,大家应该比较熟悉,或者多多少少在项目中用过.写这篇文章简单分析一下Hooks的原理,并带大家实现一个简易版的Hooks. 这篇写的比较细,相关的知识点都会解释,给大家刷新一下记忆. Hooks Hooks是React 16.8推出的新功能.以这种更简单的方式进行逻辑复用.之前

  • React Hooks使用startTransition与useTransition教程示例

    目录 引言 需求分析 startTransition使用 useTransition 总结 引言 今天带来的是react18版本推出的全新hooks:useTransition,它的使用范围主要是用于性能优化,今天我们一探究竟吧. 需求分析 假设现在有如下需求:当用户在输入框查询数据时,需要实时根据用户输入数据进行搜索提示项的展示.与以往不同的是,提示列表的个数是十分庞大的,每次都在10000条以上. 设计过程 import {useState} from "react"; impor

  • React使用高阶组件与Hooks实现权限拦截教程详细分析

    目录 思路 实现 注入权限列表 抽离Context 向页面注入权限列表的HOC 向根组件注入权限 含有权限拦截功能的HOC 无权限时显示的组件 权限拦截HOC组件 测试 用于测试的组件 在组件中使用权限组件 高阶组件是以组件作为参数,返回一个组件的函数.返回的组件把传进去的组件进行功能强化.通过以下示例进一步理解高阶组件. 思路 使用HOC包裹需要权限的页面或组件,并注入唯一的权限签名 用Context保存全局的权限菜单列表,用Provider注入异步获取到的权限菜单 在HOC中用useCont

  • React为 Vue 引入容器组件和展示组件的教程详解

    如果你使用过 Redux 开发 React,你一定听过 容器组件(Smart/Container Components) 或 展示组件(Dumb/Presentational Components),这样划分有什么样的好处,我们能否能借鉴这种划分方式来编写 Vue 代码呢?这篇文章会演示为什么我们应该采取这种模式,以及如何在 Vue 中编写这两种组件. 为什么要使用容器组件? 假如我们要写一个组件来展示评论,在没听过容器组件之前,我们的代码一般都是这样写的: components/Comment

  • React Diff算法不采用Vue的双端对比原因详解

    目录 前言 React 官方的解析 Fiber 的结构 Fiber 链表的生成 React 的 Diff 算法 第一轮,常见情况的比对 第二轮,不常见的情况的比对 重点如何协调更新位置信息 小结 图文解释 React Diff 算法 最简单的 Diff 场景 复杂的 Diff 场景 Vue3 的 Diff 算法 第一轮,常见情况的比对 第二轮,复杂情况的比对 Vue2 的 Diff 算法 第一轮,简单情况的比对 第二轮,不常见的情况的比对 React.Vue3.Vue2 的 Diff 算法对比

  • React跨端动态化之从JS引擎到RN落地详解

    目录 一 为什么跨端动态化迫在眉睫 二 首当其冲的为什么是 React Native 三 JS 引擎让跨端动态化成为可能 四 走进 React Native 的世界 五 总结 一 为什么跨端动态化迫在眉睫 目前很多互联网大厂的移动端开发都在朝着跨端动态化方向发展.由于快速迭代开发或者对原生包体积要求严格,及其对资源成本的把控,实现跨端动态化迫在眉睫.我们先来看看 Native 原生开发的一些不足之处: 1 原生开发周期时间长,审核周期长,会影响到需求发布和迭代效率,有些场景下会更加棘手,比如修复

  • D3.js实现折线图的方法详解

    前言 D3.js是一个帮助开发者操纵基于数据的文档的JavaScript类库,在<D3.js实现柱状图的方法详解>中已经给大家介绍过如何用D3.js来实现一个简单的柱状图了,今天我们来学习用D3.js来实现折线图,感兴趣的朋友们下面来一起看看吧. 折线图由坐标轴.线条和点组成.和实现柱状图一样,我们还是先把大概的画图框架搭起来,代码如下(别忘了添加D3.js): <!DOCTYPE html> <html lang="en"> <head>

  • D3.js实现雷达图的方法详解

    前言 再简单介绍下D3.js,D3.js 是一个基于数据操作文档JavaScript库.D3帮助你给数据带来活力通过使用HTML.SVG和CSS.D3重视Web标准为你提供现代浏览器的全部功能,而不是给你一个专有的框架.结合强大的可视化组件和数据驱动方式Dom操作.这里也可以看到它是用SVG来呈现图表的,所以使用D3.js是需要一定的SVG基础的. 本文依然是先把简单的画图框架搭起来,添加SVG画布.这里和饼图有点类似,为了方便后面的绘制,我们把组合这些元素的g元素移动到画布的中心: <!DOC

  • D3.js实现饼状图的方法详解

    前言 小编在之前已经跟大家分享过关于怎样用柱状图和折线图这两种基本图表.这两种图表都是有坐标轴的,现在来说一种没有坐标轴的图表--饼图. 饼状图实现 还是和之前一样,我们先把简单的画图框架搭起来,添加SVG画布.但是这里需要注意的是,为了方便后面画饼图上的弧形,我们把组合这些元素的g元素移动到画布的中心: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

  • React利用插件和不用插件实现双向绑定的方法详解

    前言 以前对于双向绑定概念来自于Angular.js,现在我用我感兴趣的react.js来实现这样的方式. 有2种方式分析,1:不用插件,2:用插件 (引入react.js操作省略...) 不用插件: 先创建react组件 var NoLink = React.createClass({}); React.render(<NoLink />,document.body); 组件创建好了,需要一个初始化变量,来公用显示输入的数据 var NoLink = React.createClass({

  • D3.js中data(), enter() 和 exit()的问题详解

    D3的应用非常广泛,现在成为了主流数据可视化工具之一.大家在刚接触使用d3.js的时候,感到最吃力的地方是data(), enter(), exit()这几个操作. 在我接触一段时间,有了一些了解之后,简单说说我的理解. data() 先看一个例子: <body> <p></p> <p></p> <p></p> </body> 执行代码: d3.select("body").selectAl

  • d3.js实现立体柱图的方法详解

    前言 众所周知随着大数据时代的来临,数据可视化的重要性也越来越凸显,那么今天就基于d3.js今天给大家带来可视化基础图表柱图进阶:立体柱图,之前介绍过了d3.js实现柱状图的文章,感兴趣的朋友们可以看一看. 关于d3.js d3.js是一个操作svg的图表库,d3封装了图表的各种算法.对d3不熟悉的朋友可以到d3.js官网学习d3.js. 另外感谢司机大傻(声音像张学友一样性感的一流装逼手)和司机呆(呆萌女神)等人对d3.js进行翻译! HTML+CSS <!DOCTYPE html> <

  • React项目中axios的封装与API接口的管理详解

    目录 前言 安装 引入 环境的切换 请求拦截 响应拦截 api的统一管理 总结 前言 在react项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等.如果还对axios不了解的,可以移步axios文档. 安装 //使用npm安装 npm install axios; //使用yarn安装 yarn add axios 引入 在项目

随机推荐