diff --git a/demos/gallery-graphanalyzer.html b/demos/gallery-graphanalyzer.html index 20418eacb8..479878f4f3 100644 --- a/demos/gallery-graphanalyzer.html +++ b/demos/gallery-graphanalyzer.html @@ -27,7 +27,6 @@ //the instances of plugins let maxSpanningForest = new MaxSpanningForestPlugin({ layoutCfg: { - kg: 12, prevOverlapping: true, onLayoutComplete: function () { const minimap = document.getElementById('minimap'); @@ -37,14 +36,15 @@ } } }); - let nodeSizeMapper = new Mapper('node', 'userview', 'size', [20, 50], { + let nodeSizeMapper = new Mapper('node', 'userview', 'size', [15, 50], { legendCfg: { containerId: 'legend', + height: 100, title: { text: 'UV', fill: '#333' }, - layout: 'horizontal', + layout: 'vertical', itemFormatter(text) { if (text >= 100000000) { return text / 100000000 + '亿'; @@ -55,7 +55,7 @@ } } }); - let edgeSizeMapper = new Mapper('edge', 'userview', 'size', [1, 16], { + let edgeSizeMapper = new Mapper('edge', 'userview', 'size', [1, 8], { legendCfg: null }); let nodeColorMapper = new Mapper('node', 'stayTime', 'color', ['#BAE7FF', '#1890FF', '#0050B3'], { @@ -64,7 +64,8 @@ title: { text: 'Stay Time' }, - layout: 'vertical' + layout: 'horizontal', + width: 100, } }); let minimapPlugin = new G6.Plugins['tool.minimap']({ @@ -77,7 +78,7 @@ graph = new G6.Graph({ id: 'mountNode', // dom id - fitView: 'autoZoom', + // fitView: 'autoZoom', plugins: [ maxSpanningForest, nodeColorMapper, @@ -90,11 +91,16 @@ }, height: 500, }); - graph.read(Util.cloneDeep(data)); - // graph.getNodes().forEach(node=>{ - // graph.toFront(node); - // // node.getGraphicGroup().toFront(); + // graph.on('afterrender', ()=>{ + // const nodes = graph.getNodes(); + // let centerNode = nodes[0]; + // nodes.forEach(node => { + // if(centerNode.getModel().userview < node.getModel().userview) centerNode = node; + // }); + // graph.focus(centerNode); // }); + graph.read(Util.cloneDeep(data)); + // graph.on('afterchange', ()=>{ // graph.getNodes().forEach(node=>{ // // graph.toFront(node); diff --git a/package.json b/package.json index e51b760f1a..89a4862bb6 100644 --- a/package.json +++ b/package.json @@ -108,8 +108,8 @@ "run": [] }, "dependencies": { - "@antv/g": "~3.1.0-beta.7", - "@antv/g2": "~3.2.7-beta.5", + "@antv/g": "~3.1.0-beta.11", + "@antv/g2": "~3.2.7-beta.4", "@antv/hierarchy": "~0.3.13", "@antv/scale": "^0.0.1", "d3": "^5.4.0", diff --git a/plugins/layout.forceAtlas2/layout.js b/plugins/layout.forceAtlas2/layout.js index 44d6285624..d8143c57ed 100644 --- a/plugins/layout.forceAtlas2/layout.js +++ b/plugins/layout.forceAtlas2/layout.js @@ -35,13 +35,13 @@ class Layout { * larger the kr, looser the layout * @type {number} */ - kr: 10, + kr: 0, /** * the parameter for gravity forces * @type {number} */ - kg: 1.0, + kg: 1, /** * modes: @@ -150,18 +150,20 @@ class Layout { } if (this.maxIteration === 0) { maxIteration = 250; - if (size <= 200 && size > 100) { - maxIteration = 1000; - } else if (size <= 300 && size > 200) { - maxIteration = 1500; - } else if (size > 300 && size <= 600) { - maxIteration = 2000; - } else if (size > 600) { - maxIteration = 2200; - } + if (size <= 200 && size > 100) maxIteration = 1000; + else if (size > 200) maxIteration = 1200; this.maxIteration = maxIteration; } - + if (kr === 0) { + kr = 50; + if (size > 100 && size <= 500) kr = 20; + else if (size > 500) kr = 1; + } + // if (kg === 0) { + // kg = 20; + // if (size > 100 && size <= 500) kg = 35; + // else if (size > 500) kg = 50; + // } const obj = { nodes, edges, @@ -191,7 +193,7 @@ class Layout { loading.style.setProperty('width', divWidth + 'px'); loading.style.setProperty('height', divHeight + 'px'); loading.style.setProperty('margin-top', -parent.offsetHeight + 'px'); - loading.style.zIndex = 3; + loading.style.zIndex = 4; parent.appendChild(loading); // the loading image const imgSize = 200; diff --git a/plugins/template.maxSpanningForest/index.js b/plugins/template.maxSpanningForest/index.js index e49bb1c222..dcdcfb776e 100644 --- a/plugins/template.maxSpanningForest/index.js +++ b/plugins/template.maxSpanningForest/index.js @@ -38,8 +38,8 @@ class Plugin { }] }, layoutCfg: { - kr: 120, - kg: 8.0, + kr: 0, + kg: 20, prevOverlapping: true, maxIteration: 0, barnesHut: false, diff --git a/plugins/tool.fisheye/index.js b/plugins/tool.fisheye/index.js index 99fd67fbb8..8cd5256163 100644 --- a/plugins/tool.fisheye/index.js +++ b/plugins/tool.fisheye/index.js @@ -32,7 +32,7 @@ class Plugin { } graph.updateNodePosition(this.preMoveNodes); this.preMoveNodes = fisheye.zoom(ev.x, ev.y); - }, 16) + }, 30) ); }); const cacheLocation = Util.debounce(ev => { @@ -49,7 +49,7 @@ class Plugin { } else { this.oriPos.set(ev.originModel.id, { x: ev.updateModel.x, y: ev.updateModel.y }); } - }, 16); + }, 30); // record the layout positions, in order to restore the positions after fisheye zooming graph.on('afterchange', cacheLocation); graph.on('afterlayout', cacheLocation); diff --git a/plugins/tool.mapper/index.js b/plugins/tool.mapper/index.js index 65f5e92865..88a96e797b 100644 --- a/plugins/tool.mapper/index.js +++ b/plugins/tool.mapper/index.js @@ -277,9 +277,6 @@ class Plugin { legend.move(-bbox.minX + padding, -bbox.minY + padding); canvas.changeSize(legendWidth + 2 * padding, legendHeight + 2 * padding); this.legend = legend; - this.legendCanvas = canvas; - this.legendWidth = legendWidth; - this.legendHeight = legendHeight; canvas.draw(); } _createCatLegend(canvas) { @@ -308,7 +305,7 @@ class Plugin { } _getLegendCfg(defaultCfg) { const legendCfg = this.legendCfg; - if (Util.isNil(legendCfg.width)) { + if (Util.isNil(legendCfg.width) && Util.isNil(legendCfg.height)) { if (legendCfg.layout === 'horizontal') { legendCfg.width = 150; legendCfg.height = 15; @@ -317,6 +314,19 @@ class Plugin { legendCfg.height = 150; } } + if (!Util.isNil(legendCfg.width) && Util.isNil(legendCfg.height)) { + if (legendCfg.layout === 'horizontal') { + legendCfg.height = legendCfg.width / 10; + } else { + legendCfg.height = legendCfg.width * 10; + } + } else if (Util.isNil(legendCfg.width) && !Util.isNil(legendCfg.height)) { + if (legendCfg.layout === 'horizontal') { + legendCfg.width = legendCfg.height * 10; + } else { + legendCfg.width = legendCfg.height / 10; + } + } return Util.mix(true, {}, defaultCfg, legendCfg); } _createContinuousColorLegend(canvas) {