状态
showItem(item)
显示指定的元素。
参数
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
item | String | Object | true |
用法
// 通过ID查询节点实例
const item = graph.findById('nodeId');
graph.showItem(item);
// 等价于
graph.showItem('nodeId');
hideItem(item)
隐藏指定元素。
参数
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
item | String | Object | true |
用法
// 通过ID查询节点实例
const item = graph.findById('nodeId');
graph.hideItem(item);
// 等价于
graph.hideItem('nodeId');
setItemState(item, state, enabled)
设置元素状态。
该方法在执行过程中会触发beforitemstatechange
,afteritemstatechange
事件。
参数
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
item | String | Object | true |
state | String | true | 状态值,支持自定义,如 selected、hover、actived等。 |
enabled | Boolean | true | 是否启用状态 |
用法
graph.setItemState('node1', 'selected', true);
clearItemStates(item, states)
清除元素状态,可以一次性清除多个状态。
参数
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
item | String | Object | true |
states | String | Array | null |
用法
// 清除单个状态
graph.clearItemStates(node, 'a');
// 清除多个状态
graph.clearItemStates(node, ['a', 'b']);
// 清除所有状态
graph.clearItemStates(node);
node(nodeFn)
设置各个节点样式,以及在各个状态下节点的 KeyShape 的样式。
提示:该方法必须在 render 之前调用,否则不起作用。
参数
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
nodeFn | Function | true | 指定每个节点样式 |
用法
graph.node(node => {
return {
id: node.id,
shape: 'rect',
style: {
fill: 'blue',
},
};
});
graph.data(data);
graph.render();
edge(edgeFn)
设置各条边的样式。
提示:该方法必须在 render 之前调用,否则不起作用。
参数
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
edgeFn | Function | true | 指定每条边的样式 |
用法
graph.edge(edge => {
return {
id: edge.id,
shape: 'cubic-horizontal',
style: {
stroke: 'green',
},
};
});
graph.data(data);
graph.render();