g6/plugins/tool.mapper/README.md

75 lines
1.8 KiB
Markdown
Raw Normal View History

## mapper
Associate the input range with the @antv/scale, @antv/attr and @antv/g2/src/component/legend.
Constructor parameters:
- itemType: 'node'/'edge. The type of the item being mapped.
- dim: the dimension of the edge. e.g. 'class'.
- range: the range the of mapping result. e.g. [ 0, 1 ], ['#BAE7FF', '#1890FF', '#0050B3'].
- channel: the visual channel. e.g.'size', 'color'.
- othercfg:
- scaleCfg: the configuration of the scale.
- legendCfg: the configuration of the legend.
null: no lengend.
scale: scaling the size of the legend.
formatter: a function for formatting the number label of the slider.
legendTitle: the title of the legend.
legendLayout: the layout way of the legend.'horizontal'/'vertical'
legendWdith and lengedHeight: the size of the legend. Defualt: 150*15 for horizontal layout, 15*150 for vertical layout.
## use
simple use.
```js
const Mapper = G6.Plugins['tool.mapper']
const nodeColorMapper = new Mapper('node', 'class', 'color', ['#BAE7FF', '#0050B3'], {
legendCfg: {
scale: 0.5
}
});
const edgeSizeMapper = new Mapper('edge', 'weight', 'size', [2, 20], {
legendCfg: null
});
const data = {
nodes: [{
id: 'node1',
x: 100,
y: 200,
class: 'class_1'
}, {
id: 'node2',
x: 300,
y: 200,
class: 'class_1'
}, {
id: 'node3',
x: 100,
y: 100,
class: 'class_2'
}, {
id: 'node4',
x: 300,
y: 100,
class: 'class_2'
}],
edges: [{
target: 'node2',
source: 'node1',
weight: 5
}, {
target: 'node3',
source: 'node2',
weight: 20
}, {
target: 'node4',
source: 'node3',
weight: 50
}]
};
const graph = new G6.Graph({
id: 'mountNode', // dom id
plugins: [nodeColorMapper, edgeSizeMapper],
height: 1000,
});
graph.read(data);
```