antvis/G6

设置节点的labelCfg时,opacity值不生效 #4894

XiaoRIGE posted onGitHub

Describe the bug

在特定的时候更改节点的状态,节点状态更新成功,但是没有按照定义该状态时的labelCfg进行渲染

Your Example Website or App

www.test.com

Steps to Reproduce the Bug or Issue

1.点击某设置节点状态 2.节点状态改变,label样式未按照labelCfg进行渲染

Expected behavior

期待按照labelCfg进行渲染

Screenshots or Videos

` import G6 from '@antv/g6';

const data = { nodes: [ { id: 'circle', label: 'Circle', x: 250, y: 150, }, ], };

const width = document.getElementById('container').scrollWidth; const height = document.getElementById('container').scrollHeight || 500; const graph = new G6.Graph({ container: 'container', width, height, // translate the graph to align the canvas's center, support by v3.5.1 fitCenter: true, modes: { default: ['drag-canvas', 'drag-node'], }, defaultNode: { type: 'circle', size: [60], labelCfg: { /* label's position, options: center, top, bottom, left, right / position: 'right', / label's offset to the keyShape, 4 by default / // offset: 12, / label's style / // style: { // fontSize: 20, // fill: '#ccc', // fontWeight: 500 // } }, / configurations for four linkpoints / linkPoints: { top: true, right: true, bottom: true, left: true, / linkPoints' size, 8 by default / // size: 5, / linkPoints' style / // fill: '#ccc', // stroke: '#333', // lineWidth: 2, }, / icon configuration / icon: { / whether show the icon, false by default / show: true, / icon's img address, string type / // img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', / icon's size, 20 * 20 by default: */ // width: 40, // height: 40 },

}, nodeStateStyles: { hide: { fill: 'red', labelCfg: { style: { fontSize: 14, fontWeight: 600, opacity: 0.2, }, position: 'bottom', offset: 40, }, }, }, /* styles for different states, there are built-in styles for states: active, inactive, selected, highlight, disable */ // nodeStateStyles: { // // node style of active state // active: { // fillOpacity: 0.8, // }, // // node style of selected state // selected: { // lineWidth: 5, // }, // }, });

graph.data(data); graph.render();

graph.on('node:mouseenter', (evt) => { const { item } = evt; graph.setItemState(item, 'active', true); });

graph.on('node:mouseleave', (evt) => { const { item } = evt; graph.setItemState(item, 'active', false); });

graph.on('node:click', (evt) => { const { item } = evt; graph.setItemState(item, 'selected', true); }); graph.on('canvas:click', (evt) => { graph.getNodes().forEach((node) => { graph.clearItemStates(node); }); });

setTimeout(()=>{ graph.setItemState('circle', 'hide', true) },2000)

`

Platform

  • OS: [e.g. macOS, Windows, Linux]
  • Browser: [e.g. Chrome, Safari, Firefox]
  • Version: [e.g. 91.1]

Additional context

No response


看起来你是设置在 hide 状态下的样式?给个在线复现的 demo 吧

posted by Yanyan-Wang over 1 year ago

有办法解决吗?

posted by XiaoRIGE over 1 year ago

This issue has been closed because it has been outdate for a long time. Please open a new issue if you still need help.

这个 issue 已经被关闭,因为 它已经过期很久了。 如果你仍然需要帮助,请创建一个新的 issue。

posted by github-actions[bot] 10 months ago

Fund this Issue

$0.00
Funded

Pull requests