我和老王不太熟
react能用g6，其使用方法：1、通过“npm install --save @antv/g6”命令在项目引入antv g6；2、使用“yarn install”重新载入依赖；3、在需要使用到g6的js文件中引入g6即可。
本教程操作环境：windows10系统、react18版、dell g3电脑。
react能用g6吗？
能用。
react中使用antv g6
antv g6：g6 是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化尊龙凯时的解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。尊龙凯时官网
antv g6的引入
项目中使用npm对包引入
npm install --save @antv/g6
重新载入依赖
yarn install
在需要使用到g6的js文件中引入g6
import g6 from '@antv/g6';
自此，准备工作结束，下面开始使用g6绘制需要的关系图，以力导向图为例描述一对多、一对一的关系。
antv g6的使用
创建容器：在 html 中创建一个用于容纳 g6 绘制的图的容器，通常为 div 标签。g6 在绘制时会在该容器下追加 canvas 标签，然后将图绘制在其中。
ref：在 react 中，可以通过ref.current获取到真实的 dom 元素。forwarding refs（官方文档）
创建关系图：创建关系图（实例化）时，至少需要为图设置容器、宽和高。其余请参考图例对应的api以及官方api文档，按需配置。
graph = new g6.graph({
container: ref.current,
width: width < 1000 ? 387 : width,
height: width < 1000 ? 220 : 550,
layout: {
type: 'force',
preventoverlap: true,
linkdistance: (d) => {
if (d.source.id === 'node0') {
return 10;
}
return 80;
},
nodestrength: (d) => {
if (d.isleaf) {
return 200;
}
return -500;
},
edgestrength: (d) => {
if (d.source.edgestrength) {
return 0.1;
}
return 0.8;
},
},
defaultnode: {
color: '#5b8ff9',
},
edgestatestyles: {
highlight: {
stroke: '#5b8ff9' // 这个颜色可以根据个人喜好进行修改
}
},
modes: {
default: ['drag-canvas', 'zoom-canvas'],
},
});数据处理及准备：根据所需图表的数据格式，对数据进行处理。
配置数据源并渲染：
graph.data(data); // 读取 step 2 中的数据源到图上 graph.render(); // 渲染图
antv g6的基本使用阐述完后，需要注意在react中，g6与antv l7及antv g2，bizcharts有所不同，antv g6在使用过程中需要访问节点，将其图形作为组件使用时，如果忽略这一点，则会出现问题。 react中使用g6（尊龙凯时官网文档）
antv g6在react中注意
将渲染g6图形的demo作为匿名函数返回，同时函数return的应为上文创建的容器，在其他js文件中调用demo时作为组件，同时传入的参数为匿名函数的形参。
上文中第二步：“创建关系图”中生成的实例应在副作用useeffect中定义。
由于在compotentdidmount中获取数据，当渲染demo时可能会存在数据并未得到响应便渲染demo导致报错，解决办法如下：
{devicedata.length ? : <>} 实现效果
完整代码及部分解释如下：
demo.js
import g6 from '@antv/g6';
import react, {useeffect} from "react";
import groupby from 'lodash/groupby'
import router from "umi/router";
function dealdata(data) {//数据处理函数
const datagroup = groupby(data, (item) => [item.chipgroupname])
const nodes = [];
const edges = [];
let index = 0;
nodes.push({id: `node${index}`, size: 90, label: "芯片组管理", edgestrength: true})
for (const key in datagroup) {
index = 1;
nodes.push({id: `node${index}`, size: 60, label: key, edgestrength: false, isleaf: true})
edges.push({source: `node0`, target: `node${index}`, label: '芯片', routerflag: 0})
if (datagroup[key]) {
const indextemp = index;
datagroup[key].map((item) => {
index = 1;
nodes.push({id: `node${index}`, size: 40, label: item.name, edgestrength: false})
edges.push({source: `node${indextemp}`, target: `node${index}`, label: "产品", routerflag: 1})
})
}
}
const returndata = {
nodes: [...nodes],
edges: [...edges],
}
return returndata;
}
export default function (props) {//props为传入的参数
const ref = react.useref(null)
let graph = null;
useeffect(() => {
const {g6data} = props;
const data = dealdata(g6data);
const width = document.getelementbyid('test').clientwidth;//获取当前宽度
if (!graph) {
graph = new g6.graph({//生成关系图实例
container: ref.current,//获取真实的dom节点
width: width < 1000 ? 387 : width,//根据所需大小定义高度、宽度
height: width < 1000 ? 220 : 550,
layout: {//根据要求所需及官方api文档配置
type: 'force',
preventoverlap: true,
linkdistance: (d) => {
if (d.source.id === 'node0') {
return 10;
}
return 80;
},
nodestrength: (d) => {//根据要求所需及官方api文档配置
if (d.isleaf) {
return 200;
}
return -500;
},
edgestrength: (d) => {//根据要求所需及官方api文档配置
if (d.source.edgestrength) {
return 0.1;
}
return 0.8;
},
},
defaultnode: {//根据要求所需及官方api文档配置
color: '#5b8ff9',
},
edgestatestyles: {//根据要求所需及官方api文档配置
highlight: {
stroke: '#5b8ff9' // 这个颜色可以根据个人喜好进行修改
}
},
modes: {//根据要求所需及官方api文档配置
default: ['drag-canvas', 'zoom-canvas'],
},
});
}
const {nodes} = data;
graph.data({//绑定数据
nodes,
edges: data.edges.map((edge, i) => {
edge.id = `edge${i}`;
return object.assign({}, edge);
}),
});
graph.render();//渲染图形
//下面为交互事件配置及操作函数
graph.on('node:dragstart', (e) => {
graph.layout();
refreshdragednodeposition(e);
});
graph.on('node:drag', (e) => {
refreshdragednodeposition(e);
});
graph.on('node:dragend', (e) => {
e.item.get('model').fx = null;
e.item.get('model').fy = null;
});
graph.zoom(width < 1000 ? 0.7 : 1, {x: 300, y: 300});
graph.on('node:mouseenter', (ev) => {
const node = ev.item;
const edges = node.getedges();
const model = node.getmodel();
const size = model.size * 1.2;
graph.updateitem(node, {
size,
});
edges.foreach((edge) => {
graph.setitemstate(edge, 'highlight', true)
});
});
graph.on('node:click', (e) => {
router.push({pathname: `/devicesetting/chipsetmanagement`})
});
graph.on('node:mouseleave', (ev) => {
const node = ev.item;
const edges = node.getedges();
const model = node.getmodel();
const size = model.size / 1.2;
graph.updateitem(node, {
size,
});
edges.foreach((edge) => graph.setitemstate(edge, 'highlight', false));
});
function refreshdragednodeposition(e) {
const model = e.item.get('model');
model.fx = e.x;
model.fy = e.y;
}
}, []);
return <>
;
};具体使用demo的js文件：
import g6picture from './demo'
render（
return（
<>
{devicedata.length ? : <>}
）
） 