123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <div id="mountNode"></div>
- <script src="../build/g6.js"></script>
- <script src="../build/minimap.js"></script>
- <script>
- G6.registerEdge('relation', {
- draw(cfg, group) {
- const keyShape = group.addShape('path', {
- attrs: {
- path: [
- [ 'M', cfg.startPoint.x, cfg.startPoint.y ],
- [ 'L', cfg.endPoint.x, cfg.endPoint.y ]
- ],
- stroke: '#666',
- lineWidth: 2,
- lineAppendWidth: 4
- }
- });
- const center = keyShape.getPoint(0.5);
- const points = keyShape.getStartTangent();
- const angle = Math.atan((points[1][1] - points[0][1]) / (points[1][0] - points[0][0]));
- const shapeContainer = group.addGroup();
- /*shapeContainer.transform([
- ['t', -center.x, -center.y],
- ['r', angle],
- ['t', center.x, center.y]
- ]);*/
- shapeContainer.addShape('path', {
- attrs: {
- path: [
- [ 'M', center.x - 40, center.y ],
- [ 'L', center.x, center.y - 20 ],
- [ 'L', center.x + 40, center.y ],
- [ 'L', center.x, center.y + 20 ],
- [ 'Z' ]
- ],
- fill: '#fff',
- stroke: '#666'
- }
- });
- shapeContainer.addShape('text', {
- attrs: {
- text: cfg.relation,
- x: center.x,
- y: center.y,
- textAlign: 'center',
- textBaseline: 'middle',
- fill: '#666'
- }
- });
- let point = G6.Util.getLabelPosition(keyShape, 0, 10, 10, true);
- group.addShape('text', {
- attrs: {
- text: cfg.sourceEntity,
- x: point.x,
- y: point.y,
- rotate: point.rotate,
- fill: '#666'
- }
- });
- point = G6.Util.getLabelPosition(keyShape, 1, -15, 10, true);
- group.addShape('text', {
- attrs: {
- text: cfg.targetEntity,
- x: point.x,
- y: point.y,
- fill: '#666',
- rotate: point.rotate
- }
- });
- return keyShape;
- }
- });
- const minimap = new Minimap({ size: [ 160, 100 ] });
- const graph = new G6.Graph({
- container: 'mountNode',
- width: 800,
- height: 500,
- plugins: [ minimap ],
- modes: {
- default: [ 'drag-node', 'drag-canvas', 'zoom-canvas']
- }
- });
- const data = {
- nodes: [{
- id: 'customer',
- label: 'customer',
- x: 200,
- y: 200,
- shape: 'rect',
- size: [60, 40]
- }, {
- id: 'customer_id',
- label: 'customer_id',
- x: 120,
- y: 160,
- shape: 'ellipse',
- size: [80,40]
- }, {
- id: 'name',
- label: 'name',
- x: 140,
- y: 100,
- shape: 'ellipse',
- size: [80,40]
- }, {
- id: 'address',
- label: 'address',
- x: 180,
- y: 60,
- shape: 'ellipse',
- size: [80, 40]
- }, {
- id: 'email',
- label: 'email',
- x: 240,
- y: 110,
- shape: 'ellipse',
- size: [80, 40]
- }, {
- id: 'order',
- label: 'order',
- x: 400,
- y: 200,
- shape: 'rect',
- size: [60, 40]
- }, {
- id: 'order_id',
- label: 'order_id',
- x: 320,
- y: 130,
- shape: 'ellipse',
- size: [80, 40]
- }, {
- id: 'order_status',
- label: 'order_status',
- x: 380,
- y: 80,
- shape: 'ellipse',
- size: [80, 40]
- }, {
- id: 'total_price',
- label: 'total_price',
- x: 440,
- y: 150,
- shape: 'ellipse',
- size: [80, 40]
- }, {
- id: 'employee',
- label: 'employee',
- x: 380,
- y: 380,
- shape: 'rect',
- size: [60, 40]
- }, {
- id: 'employee_id',
- label: 'employee_id',
- x: 320,
- y: 440,
- shape: 'ellipse',
- size: [80, 40]
- }, {
- id: 'title',
- label: 'title',
- x: 440,
- y: 440,
- shape: 'ellipse',
- size: [80, 40]
- }],
- edges: [{
- id: 'c_id',
- source: 'customer',
- target: 'customer_id'
- }, {
- id: 'c_name',
- source: 'customer',
- target: 'name'
- }, {
- id: 'c_address',
- source: 'customer',
- target: 'address'
- }, {
- id: 'c_email',
- source: 'customer',
- target: 'email'
- }, {
- id: 'o_id',
- source: 'order',
- target: 'order_id'
- }, {
- id: 'o_price',
- source: 'order',
- target: 'total_price'
- }, {
- id: 'o_status',
- source: 'order',
- target: 'order_status'
- }, {
- id: 'c_o',
- source: 'customer',
- target: 'order',
- relation: 'places',
- sourceEntity: '1',
- targetEntity: 'N',
- shape: 'relation'
- }, {
- id: 'o_e',
- source: 'employee',
- target: 'order',
- relation: 'finalize',
- sourceEntity: '1',
- targetEntity: 'N',
- shape: 'relation'
- }, {
- id: 'e_id',
- source: 'employee',
- target: 'employee_id'
- }, {
- id: 'e_title',
- source: 'employee',
- target: 'title'
- }]
- };
- graph.data(data);
- graph.render();
- </script>
- </body>
- </html>
|