react は g6 を使用できます。使用方法: 1. 「npm install --save @antv/g6」コマンドを使用してプロジェクトに AntV G6 を導入します; 2. 「yarn install」を使用して依存関係をリロードします; 3. G6 を使用する必要がある js ファイルに G6 を導入するだけです。
#このチュートリアルの動作環境: Windows 10 システム、react18 バージョン、Dell G3 コンピューター。
#React は g6 を使用できますか? ＃＃＃＃＃＃＃＃＃ に使える。
React での AntV G6 の使用AntV G6: G6 は、シンプルで使いやすく、完全なグラフ視覚化エンジンです。使いやすいグラフ視覚化ソリューション。これは、開発者が独自のグラフ視覚化、グラフ分析、またはグラフ エディター アプリケーションを構築するのに役立ちます。公式 Web サイトAntV G6 の紹介
npm を使用してプロジェクトにパッケージを導入します
npm install --save @antv/g6
依存関係をリロード
yarn install
必要な js ファイル内でuse G6 G6
import G6 from '@antv/g6';
を導入したら準備作業は終わったので、G6を使って力指向図を例に1対多と1対を記述する必要な関係図を描いてみましょう。 -1つの関係。
AntV G6 の使用コンテナの作成: G6 によって描画された図 (通常は div タグ) を収容するコンテナを HTML で作成します。 G6 が描画するときは、コンテナの下に Canvas タグを追加し、その中に画像を描画します。 ref: React では、ref.current を通じて実際の DOM 要素を取得できます。 Forwarding Refs (公式ドキュメント)
<div ref={ref} id="test"/>関係図の作成: 関係図 (インスタンス化) を作成する場合、少なくとも図のコンテナー、幅、高さを設定する必要があります。残りについては、凡例に対応する 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 の使用 (公式 Web サイトのドキュメント)G6 グラフィックスを匿名関数としてレンダリングするデモを返します。同時に、関数の戻り値は上記で作成したコンテナである必要があり、他の js ファイルで Demo を呼び出すときにコンポーネントとして使用され、渡されるパラメータは匿名関数の仮パラメータです。
上記の 2 番目のステップ「関係図の作成」で生成されたインスタンスは、副作用 useEffect で定義する必要があります。
CompotentDidMount でデータを取得しているため、デモをレンダリングする際に、デモをレンダリングする前に応答を受け取らないデータが存在し、エラーが発生する可能性があります。
{deviceData.length ? <G6Picture g6Data={deviceData}/> : <></>}効果を達成する
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 <>
<div ref={ref} id="test"/>
;
};デモの js ファイルの具体的な使用法:
import G6Picture from './Demo'
render（
return（
<>
{deviceData.length ? <G6Picture g6Data={deviceData}/> : <></>}
）
）推奨学習: 「
react ビデオ チュートリアル」
以上がReactはg6でも使えますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
