526互联

antv g6 如何在 stateStyles 中配置 labelCfg

发布时间 2023-03-22 21:13:52作者: rachelch

根据官方文档的说明，从 AntV G6 3.4 版本开始已经支持子图形状态样式：

        // 节点不同状态下的样式集合
        nodeStateStyles: {
          inactive: {
            opacity: 0.4,
            'text-shape': { // 节点label文字设置
              opacity: 0.4
            }
          },
          // 节点移入样式
          hover: {
            stroke: 'red',
            shadowColor: 'red',
            shadowBlur: 10,
            shadowOffsetX: 1,
            shadowOffsetY: 1,
            opacity: 1
          },
          // 节点选中样式
          selected: {
            stroke: 'red',
            shadowColor: 'red',
            shadowBlur: 10,
            shadowOffsetX: 1,
            shadowOffsetY: 1,
            opacity: 1
          }
        },
        // 边不同状态下的样式集合
        edgeStateStyles: {
          inactive: {
            stroke: '#C7D5EE'
          },
          // 边移入样式
          hover: {
            stroke: 'red'
          },
          click: {
            stroke: 'red'
          }
        },