We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
在图例正常设置并且已经显示在页面上时,打印legend.container会显示undefined,legend.changeData会报以下错误:
如有需要请告诉我 我再提供
const legend = new G6.Legend({ data: { nodes: [], edges: [] }, align: 'center', layout: 'horizontal', // vertical position: 'bottom-left', vertiSep: 12, horiSep: 24, offsetY: -24, padding: [4, 16, 8, 16], containerStyle: { fill: '#ccc', lineWidth: 1, }, title: 'Legend', titleConfig: { position: 'left', offsetX: 0, offsetY: 12, }, filter: { enable: true, multiple: true, trigger: 'click', graphActiveState: 'activeByLegend', graphInactiveState: 'inactiveByLegend', filterFunctions: {}, }, });
// 这里会log undefined console.log( '%c [ ]-101', 'font-size:13px; background:#b83e89; color:#fc82cd;', legend.getContainer(), );
创建g6实例: const createNewG6Graph = () => { const minimap = new Minimap({ size: [100, 100], className: 'minimap', type: 'delegate', }); const newG6Graph = new G6.Graph({ container: 'graph-container', fitView: true, modes: { default: [ 'zoom-canvas', 'drag-canvas', 'drag-node', // { type: 'activate-relations', activeState: 'active' }, ], }, layout: { type: 'fruchterman', animate: false, preventOverlap: true, nodeSize: defaultNodeSize, gravity: 10, speed: 100, }, plugins: [minimap, tooltip, legend], }); };
html结构: <div ref={ref} id={'g-graph'}> <div id={'graph-container'} style={{ height: 800, width: '100%', display: 'flex' }} >
如何在react正确使用图例并随时更新图例数据?
No response
The text was updated successfully, but these errors were encountered:
No branches or pull requests
Describe the bug
在图例正常设置并且已经显示在页面上时,打印legend.container会显示undefined,legend.changeData会报以下错误:
![1122](https://private-user-images.githubusercontent.com/50290938/315922286-2402ee3f-c18e-4507-8e10-f5a91c1a202a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM5NjEyODIsIm5iZiI6MTcyMzk2MDk4MiwicGF0aCI6Ii81MDI5MDkzOC8zMTU5MjIyODYtMjQwMmVlM2YtYzE4ZS00NTA3LThlMTAtZjVhOTFjMWEyMDJhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE4VDA2MDMwMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWMzNTNjYWRkOWFlOWIxYjMzM2Q3ZTJhYmQ4MDA3NmU3Mzk2MzU3Y2EyMzc2OWJjNjlhNmJjMDI4MWUyN2NhNmMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.u1AgisUxPsvhojaz_RG7I_j73JKQn4YwqTpCUveiM_A)
![2222](https://private-user-images.githubusercontent.com/50290938/315923481-0bec596f-1d19-4889-9e0d-75bc330063d8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM5NjEyODIsIm5iZiI6MTcyMzk2MDk4MiwicGF0aCI6Ii81MDI5MDkzOC8zMTU5MjM0ODEtMGJlYzU5NmYtMWQxOS00ODg5LTllMGQtNzViYzMzMDA2M2Q4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE4VDA2MDMwMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWE3YjZjODMwZjU2MDkwNDUwZGU3ZDBjNWVkZWI5Mjk3YmRkY2NjYTI5MmE1OTNhMzAxOGU3NmZkYzQxNWFjMzImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.MwilnqhgEU9yq0S1YOp2P-yo7uYFeEXhJ1-FZjodO2M)
Your Example Website or App
如有需要请告诉我 我再提供
Steps to Reproduce the Bug or Issue
const legend = new G6.Legend({
data: { nodes: [], edges: [] },
align: 'center',
layout: 'horizontal', // vertical
position: 'bottom-left',
vertiSep: 12,
horiSep: 24,
offsetY: -24,
padding: [4, 16, 8, 16],
containerStyle: {
fill: '#ccc',
lineWidth: 1,
},
title: 'Legend',
titleConfig: {
position: 'left',
offsetX: 0,
offsetY: 12,
},
filter: {
enable: true,
multiple: true,
trigger: 'click',
graphActiveState: 'activeByLegend',
graphInactiveState: 'inactiveByLegend',
filterFunctions: {},
},
});
// 这里会log undefined
console.log(
'%c [ ]-101',
'font-size:13px; background:#b83e89; color:#fc82cd;',
legend.getContainer(),
);
创建g6实例:
const createNewG6Graph = () => {
const minimap = new Minimap({
size: [100, 100],
className: 'minimap',
type: 'delegate',
});
const newG6Graph = new G6.Graph({
container: 'graph-container',
fitView: true,
modes: {
default: [
'zoom-canvas',
'drag-canvas',
'drag-node',
// { type: 'activate-relations', activeState: 'active' },
],
},
layout: {
type: 'fruchterman',
animate: false,
preventOverlap: true,
nodeSize: defaultNodeSize,
gravity: 10,
speed: 100,
},
plugins: [minimap, tooltip, legend],
});
};
html结构:
<div ref={ref} id={'g-graph'}>
<div
id={'graph-container'}
style={{ height: 800, width: '100%', display: 'flex' }}
>
Expected behavior
如何在react正确使用图例并随时更新图例数据?
Screenshots or Videos
No response
Platform
Additional context
No response
The text was updated successfully, but these errors were encountered: