antvis/G6

如何设置自定义节点的selected style? #4680

neolee6053 posted onGitHub

问题描述

想把选中的自定义iconfont节点换颜色以方便看起来更明显。 如何?

重现链接

https://codesandbox.io/s/g6-forked-wzlvp5?file=/index.js

重现步骤

如上

预期行为

如上

平台

  • 操作系统: [ Windows]
  • 网页浏览器: [Google Chrome]
  • G6 版本: [4.8.15]

屏幕截图或视频(可选)

No response

补充说明(可选)

No response


用state管理不可以吗

posted by lovelyGFR almost 2 years ago

用state管理不可以吗

后来才发现到。 但,想问如何可以拿到别的shape? 因为我要改的是background,不是keyshape . 这个是我随便试试的 image

posted by neolee6053 almost 2 years ago

用state管理不可以吗

后来才发现到。 但,想问如何可以拿到别的shape? 因为我要改的是background,不是keyshape . 这个是我随便试试的 image

是不是可以直接在节点定义的时候就设置stateStyles,别的shape有自己的name直接用name当key值就可以吧 https://g6.antv.antgroup.com/manual/middle/states/state

posted by lovelyGFR almost 2 years ago

用state管理不可以吗

后来才发现到。 但,想问如何可以拿到别的shape? 因为我要改的是background,不是keyshape . 这个是我随便试试的 image

是不是可以直接在节点定义的时候就设置stateStyles,别的shape有自己的name直接用name当key值就可以吧 https://g6.antv.antgroup.com/manual/middle/states/state

啊,你是说这样? 试了,不可以 group.addShape("circle", { attrs: { x: 0, y: 0, r: size[0] / 2 + 2, ...(backgroundConfig as object), stateStyles: { selected: { fill: "red", stroke: "red" } } }, name: "circle-shape" });

posted by neolee6053 almost 2 years ago

状态样式的定义可以设置不同图形的状态样式:https://g6.antv.antgroup.com/manual/advanced/state-new 看这个文档的 子图形状态样式

posted by Yanyan-Wang almost 2 years ago

状态样式的定义可以设置不同图形的状态样式:https://g6.antv.antgroup.com/manual/advanced/state-new 看这个文档的 子图形状态样式

还是不可以 const graph = new G6.Graph({ container: "container", nodeStateStyles: { selected: { "rect-shape": {
fill: "green", stroke: "green"
} } },

大大可以改改吗? https://codesandbox.io/s/g6-forked-mmyxcy?file=/index.js

posted by neolee6053 almost 2 years ago

找到答案了 https://g6.antv.antgroup.com/manual/middle/elements/nodes/custom-node

G6.registerNode( 'custom', { // 响应状态变化 setState(name, value, item) { const group = item.getContainer(); const shape = group.get('children')[0]; // 顺序根据 draw 时确定 if (name === 'selected') { if (value) { shape.attr('fill', 'red'); } else { shape.attr('fill', 'white'); } } }, }, 'rect', );

image

posted by neolee6053 almost 2 years ago

这样的话。如果需要添加其他样式,就需要一直判断了

posted by wSh-zm over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests