设置节点样式的更多方式

首先最基本的节点样式来自应用的主题，也就是通过实例化选项theme指定的主题，如果想覆盖主题的一部分配置可以通过实例化选项themeConfig：

new MindMap({
    theme: 'classic4',
    themeConfig: {
        // 覆盖主题的二级节点的填充样式
        second: {
            fillColor: 'red'
        }
    }
})

所有字段可以从默认主题default.js文件里查看。

主题将节点按层级分为三种：

{
    // 根节点样式
    root: {
        
    },
    // 二级节点样式
    second: {

    },
    // 三级及以下节点样式
    node: {

    }
}

所以你想修改哪一级节点的样式需要修改对应的层级对象，支持的字段依旧是从default.js文件里查看，如你所见，它们支持的字段是一样的。

显然这个文件里没有的字段你设置当然是没用的。

因为主题只支持这三种层级，所以比如你只想给第五层级设置样式，那么抱歉是无法实现的。

动态修改节点的样式可以使用节点实例的setStyle或setStyles方法：

node.setStyle('color', 'blue')

也可以直接使用SET_NODE_STYLE或SET_NODE_STYLES命令：

mindMap.execCommand('SET_NODE_STYLES', node, {
    fontSize: 24,
    shape: 'circle'
})

这些方法或命令最终体现在数据里就是给节点数据添加了对应的样式字段，如果使用了富文本，那么text字段中的富文本样式也会修改。

{
    data: {
        text: '节点文本',
        fontSize: 24,
        shape: 'circle',
        color: 'blue'
    }
}

那么聪明的你肯定知道，如果想在渲染时就给节点设置样式，只要给你的数据上加上样式字段再传给思维导图渲染就可以了：

new MindMap({
    data: {
        text: '节点文本',
        fontSize: 24,
        shape: 'circle',
        color: 'blue'
    },
    children: []
})

完整示例：

设置节点样式的更多方式 ​