You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2019/10/30 17:19:24 UTC

[incubator-echarts] branch master updated: feat(force): Add initial friction config in force layout #11024 (#11276)

This is an automated email from the ASF dual-hosted git repository.

shenyi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git


The following commit(s) were added to refs/heads/master by this push:
     new d1e84a6  feat(force): Add initial friction config in force layout #11024 (#11276)
d1e84a6 is described below

commit d1e84a6466925814088cac6b12fcb2c08f73c860
Author: Yi Shen <bm...@gmail.com>
AuthorDate: Thu Oct 31 01:19:13 2019 +0800

    feat(force): Add initial friction config in force layout #11024 (#11276)
    
    * feat(force): Add initial friction config in force layout #11024
    
    * test(force): Add test case for the friction parameter in force layout
---
 src/chart/graph/GraphSeries.js |   2 +
 src/chart/graph/forceHelper.js |   5 ++-
 src/chart/graph/forceLayout.js |   3 +-
 test/force-friction.html       | 100 +++++++++++++++++++++++++++++++++++++++++
 test/force.html                |  14 +-----
 test/force2.html               |  12 +----
 test/force3.html               |  16 +------
 7 files changed, 111 insertions(+), 41 deletions(-)

diff --git a/src/chart/graph/GraphSeries.js b/src/chart/graph/GraphSeries.js
index a69f7ad..2ea09b2 100644
--- a/src/chart/graph/GraphSeries.js
+++ b/src/chart/graph/GraphSeries.js
@@ -215,6 +215,8 @@ var GraphSeries = echarts.extendSeriesModel({
             // Node repulsion. Can be an array to represent range.
             repulsion: [0, 50],
             gravity: 0.1,
+            // Initial friction
+            friction: 0.6,
 
             // Edge length. Can be an array to represent range.
             edgeLength: 30,
diff --git a/src/chart/graph/forceHelper.js b/src/chart/graph/forceHelper.js
index afce6c7..a50fa58 100644
--- a/src/chart/graph/forceHelper.js
+++ b/src/chart/graph/forceHelper.js
@@ -69,11 +69,12 @@ export function forceLayout(nodes, edges, opts) {
     // var k = scale * Math.sqrt(width * height / nodes.length);
     // var k2 = k * k;
 
-    var friction = 0.6;
+    var initialFriction = opts.friction == null ? 0.6 : opts.friction;
+    var friction = initialFriction;
 
     return {
         warmUp: function () {
-            friction = 0.5;
+            friction = initialFriction * 0.8;
         },
 
         setFixed: function (idx) {
diff --git a/src/chart/graph/forceLayout.js b/src/chart/graph/forceLayout.js
index eff23fb..e61555a 100644
--- a/src/chart/graph/forceLayout.js
+++ b/src/chart/graph/forceLayout.js
@@ -97,7 +97,8 @@ export default function (ecModel) {
             var rect = coordSys.getBoundingRect();
             var forceInstance = forceLayout(nodes, edges, {
                 rect: rect,
-                gravity: forceModel.get('gravity')
+                gravity: forceModel.get('gravity'),
+                friction: forceModel.get('friction')
             });
             var oldStep = forceInstance.step;
             forceInstance.step = function (cb) {
diff --git a/test/force-friction.html b/test/force-friction.html
new file mode 100644
index 0000000..324bd16
--- /dev/null
+++ b/test/force-friction.html
@@ -0,0 +1,100 @@
+
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="lib/esl.js"></script>
+        <script src="lib/config.js"></script>
+        <script src="lib/jquery.min.js"></script>
+        <script src="lib/dat.gui.min.js"></script>
+    </head>
+    <body>
+        <style>
+            html, body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+            }
+            .chart {
+                width: 50%;
+                float: left;
+                height: 100%;
+            }
+        </style>
+        <div id="main0" class="chart"></div>
+        <div id="main1" class="chart"></div>
+        <script>
+
+            require([
+                'echarts'
+            ], function (echarts) {
+
+                [0.1, 0.9].forEach(function (friction, index) {
+                    var chart = echarts.init(document.getElementById('main' + index));
+
+                    function createNodes(count) {
+                        var nodes = [];
+                        for (var i = 0; i < count; i++) {
+                            nodes.push({
+                                id: i
+                            });
+                        }
+                        return nodes;
+                    }
+
+                    function createEdges(count) {
+                        var edges = [];
+                        if (count === 2) {
+                            return [[0, 1]];
+                        }
+                        for (var i = 0; i < count; i++) {
+                            edges.push([i, (i + 1) % count]);
+                        }
+                        return edges;
+                    }
+
+                    chart.setOption({
+                        series: {
+                            type: 'graph',
+                            layout: 'force',
+                            animation: false,
+                            data: createNodes(22),
+                            width: '50%',
+                            height: '50%',
+                            force: {
+                                layoutAnimation: false,
+                                repulsion: 100,
+                                edgeLength: 5,
+                                friction
+                            },
+                            edges: createEdges(22).map(function (e) {
+                                return {
+                                    source: e[0],
+                                    target: e[1]
+                                };
+                            })
+                        }
+                    });
+                });
+            });
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/test/force.html b/test/force.html
index e330971..3794226 100644
--- a/test/force.html
+++ b/test/force.html
@@ -39,21 +39,9 @@ under the License.
 
             require([
                 'echarts'
-
-                // 'extension/dataTool/gexf',
-
-                // 'echarts/chart/graph',
-
-                // 'echarts/component/title',
-                // 'echarts/component/legend',
-                // 'echarts/component/geo',
-                // 'echarts/component/tooltip',
-                // 'echarts/component/visualMap'
             ], function (echarts) {
 
-                var chart = echarts.init(document.getElementById('main'), null, {
-
-                });
+                var chart = echarts.init(document.getElementById('main'));
 
                 function createNodes(count) {
                     var nodes = [];
diff --git a/test/force2.html b/test/force2.html
index ae7dee4..0bd5ebf 100644
--- a/test/force2.html
+++ b/test/force2.html
@@ -41,21 +41,11 @@ under the License.
                 'echarts',
 
                 'extension/dataTool'
-
-                // 'echarts/chart/graph',
-
-                // 'echarts/component/title',
-                // 'echarts/component/legend',
-                // 'echarts/component/geo',
-                // 'echarts/component/tooltip',
-                // 'echarts/component/visualMap'
             ], function (echarts, dataTool) {
 
                 var gexf = dataTool.gexf;
 
-                var chart = echarts.init(document.getElementById('main'), null, {
-
-                });
+                var chart = echarts.init(document.getElementById('main');
 
                 $.get('./data/les-miserables.gexf', function (xml) {
                     var graph = gexf.parse(xml);
diff --git a/test/force3.html b/test/force3.html
index e7ad1ae..1d529df 100644
--- a/test/force3.html
+++ b/test/force3.html
@@ -38,22 +38,10 @@ under the License.
         <script>
 
             require([
-                'echarts',
-
-                // 'extension/dataTool/gexf'
-
-                // 'echarts/chart/graph',
-
-                // 'echarts/component/title',
-                // 'echarts/component/legend',
-                // 'echarts/component/geo',
-                // 'echarts/component/tooltip',
-                // 'echarts/component/visualMap'
+                'echarts'
             ], function (echarts) {
 
-                var chart = echarts.init(document.getElementById('main'), null, {
-
-                });
+                var chart = echarts.init(document.getElementById('main'));
 
                 var data = [{
                     fixed: true,


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org