react hooks d3实现企查查股权穿透图结构图效果详解
您的楼主邱大帅 人气:0前言
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版本。 并且查找时发现大部分例子基本都是默认信息展示，很少有点击请求子节点展示的功能，所以最终进行一个最终功能的整合
加载全部内容